I have a problem to align titles on xAxis to the left and right like on the picture. I've tried by adding html tags and inline styles to achieve this, but it's not working. Here's my code:
xAxis: [{
type: 'category',
labels: {
step: 1,
},
scrollbar: {
enabled: true,
},
min: 0,
categories: [],
title: {
align: 'high',
rotation: 0,
y: -20,
x: 60,
text: subtitleOne,
style: {
"fontSize": "14px",
"fontWeight": "bold",
"textAlign": "left"
}
}
}, {
offset: 0,
tickLength: 0,
lineWidth: 0,
title: {
align: 'high',
rotation: 0,
y: -20,
x: 45,
text: subtitleTwo,
style: {
"fontSize": "14px",
"fontWeight": "bold"
}
}
}]
What am I doing wrong?
Related
In my Highcharts configuration for horizontal bar chart, when I add a custom pointWidth, I can not change the distance between the two bars.
Please notice the maxPointWidth: 8
{
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: ['Document', 'Image', 'Audio', 'CAD', 'Zip'],
title: {
text: 'File Type',
align: 'high',
offset: 0,
rotation: 0,
y: -10,
x: -15
},
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
labels: {
style: {
}
}
},
yAxis: {
opposite: true,
title: {
text: '# Files',
align: 'middle',
style: {
/* TODO: Modify styles to accommodate the bars header */
color: '#000000'
}
},
tickInterval: 2,
gridLineColor: 'transparent',
labels: {
enabled: false
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ('#FFFFFF'),
shadow: true,
enabled: false
},
credits: {
enabled: false
},
series: [{
name: '',
data: [56, 30, 15, 11, 5],
maxPointWidth: 8
}],
colors: this.colors || defaultColors
}
Here is the working JS fiddle:
https://stackblitz.com/edit/highcharts-angular-drilldown?file=app%2Fapp.component.ts
I want to reduce the spacing between the bars and the label and keep the maxPointWidth intact.
enter image description here
To reduce spacing between bars, reduce the chart height:
chart: {
type: 'bar',
height: 200
}
Live demo: http://jsfiddle.net/BlackLabel/msph2uca/
API: https://api.highcharts.com/highcharts/chart.height
How do I best achieve a solid gauge, where:
it is responsive with regards to title and main value font/sizes
the title can wrap on several lines,
also without leaving the padding seen in the screenshot below
Screen shot (desktop vs mobile):
Notes:
This is based off the official highcharts example here.
Here's my options code (from a gaugeComponent.ts):
var options: any = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '55%'],
// size: '140%',
startAngle: -140,
endAngle: 140,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
min: 0,
max: 100,
stops: stops,
lineWidth: 0,
minorTickInterval: null,
tickAmount: 2,
className: 'highcharts-gauge-heading',
title: {
text: this.gauge.title,
y: -80,
},
labels: {
x: -5,
y: 30
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -30,
borderWidth: 0,
useHTML: true
}
}
},
credits: {
enabled: false
},
series: [{
name: this.gauge.title,
data: [this.gauge.value],
dataLabels: {
format: '<div style="text-align:left"><span style="font-size:30px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span>'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 300
},
chartOptions: {
yAxis: {
className: 'highcharts-gauge-heading-small'
}
}
}]
}
}
When I create a chart, I can place a nice line on the right side of the chart like so:
yAxis: [{
height: '65%',
offset: 0,
lineWidth: 2
}, {
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2
}]
I have been asked to add an additional line on the left of the chart, but I don't see a built-in way to do that in the API docs. Is there a way to do this?
One way could be to add y axes on left side that will be linkedTo main y axes.
Example: http://jsfiddle.net/86zm6cav/
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}, {
opposite: false,
height: '60%',
linkedTo: 0,
lineWidth: 2,
offset: 0,
labels: {
enabled: false
}
}, {
opposite: false,
top: '65%',
height: '35%',
linkedTo: 1,
lineWidth: 2,
offset: 0,
labels: {
enabled: false
}
}],
Other option is to use renderer and create a custom path(s).
API reference for renderer: http://api.highcharts.com/highcharts#Renderer.path
does Highstock support a right border for a panel (yAxis)? Right now, i can draw only left, top and down border.
Attached an image to describe my question
You can add a couple more yAxis that aren't attached to a series.
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2,
opposite: false
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2,
opposite: false
},{
height: '60%',
lineWidth: 2
}, {
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
http://jsfiddle.net/blaird/6oy17bhu/
I've this HighCharts:
$('#container').highcharts({
chart: {
type: 'scatter'
},
title: {
text: 'Title'
},
plotOptions: {
scatter: {
dataLabels: {
enabled: true,
formatter: function() {
return this.point.value;
}
}
}
},
series: [
{
name: 'Points',
data: [
{ x: 10, y: 25, value: 96.1 },
{ x: 50, y: 25, value: 96.3 },
{ x: 10, y: 50, value: 96.0 },
{ x: 50, y: 50, value: 96.3 },
{ x: 90, y: 50, value: 96.4 },
{ x: 100, y: 50, value: 96.5 },
{ x: 10, y: 100, value: 96.1 },
{ x: 50, y: 100, value: 96.3 },
{ x: 100, y: 100, value: 96.6 }
]
}
]
});
I would like to mark the 90/100 point with a dashed line. How can I do that?
See my JSFiddle.
I would use scatter series with enabled line: http://jsfiddle.net/6x6s09d8/4/
{
data: [
[90, 20],
[90, 100],
[10, 100]
],
lineWidth: 2,
dashStyle: 'Dash',
lineColor: 'black',
type: 'scatter',
marker: {
enabled: false
},
showInLegend: false,
enableMouseTracking: false
}
Only limitation now is to set minPadding: 0 for both Axes.