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
Related
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?
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'
}
}
}]
}
}
Semi Circle Pie With Triangle Gauge
How do I create the above semicircle pie chart with a triangle gauge at the top of the chart.
I have the speedometer gauge working, but it doesn't meet the needs.
Is there a way within the highchart api to use a triangle for the gauge, and not the speedometer?
Thanks
Here is the fiddle with the tweaked JSON.
https://jsfiddle.net/mschreiberjdi/nwb7vL62/
$(function() {
$('#container').highcharts({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: '40%<br>Probability Of <br>Success',
align: 'center',
verticalAlign: 'bottom',
y: -145
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
pane: {
center: ['50%', '75%'],
size: '50%',
startAngle: -90,
endAngle: 90,
background: {
borderWidth: 0,
backgroundColor: 'none',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
yAxis: [{
lineWidth: 0,
min: 0,
max: 90,
minorTickLength: 0,
tickLength: 0,
tickWidth: 0,
labels: {
enabled: false
},
title: {
text: '', //'<div class="gaugeFooter">46% Rate</div>',
useHTML: true,
y: 80
},
/*plotBands: [{
from: 0,
to: 46,
color: 'pink',
innerRadius: '100%',
outerRadius: '0%'
},{
from: 46,
to: 90,
color: 'tan',
innerRadius: '100%',
outerRadius: '0%'
}],*/
pane: 0,
}],
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
},
gauge: {
dataLabels: {
enabled: false
},
pivot: {
radius: 80,
borderWidth: 2,
borderColor: 'transparent',
backgroundColor: 'white'
},
dial: {
radius: '100%',
backgroundColor: 'gray',
borderColor: 'gray',
baseWidth: 140,
topWidth: 1,
baseLength: '10%', // of radius
rearLength: '10%'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Low', 25],
['Medium', 25],
['HIgh', 25]
]
}, {
type: 'gauge',
data: [40],
dial: {
rearLength: 0
}
}],
});
});
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/