I've been searching and I can't find an easy way to fix the Highcharts dataLabels to the bottom of the graphic. What I'm looking for is something like the following, for the column chart:
80 - ┌──┐ ┌──┐ ┌──┐
40 - | | ┌──┐ | | | |
0 -|_|__|_|__|_|_|__|_|__|_|
80 40 80 80
Cat 1 Cat 2
Thank you for you help.
You can iterate on each elemetn, and use translate function, which allows to "move" SVG elements.
var bottom = chart.plotHeight - 20;
$.each(chart.series[0].data,function(i,data){
data.dataLabel.attr({
y: bottom
});
});
Take look at the simple example:
http://jsfiddle.net/wMLg6/39/
I think code below helps you. stacking is the trick. change y value according to your chart.
plotOptions:{
column:{
stacking:'normal',
dataLabels:{
enabled:true,
verticalAlign:'bottom',
y:40
}
},
},
Related
I want to show diagonal striped patterns of desired color in stacked column bar graph. i am using default pattern url(#highcharts-default-pattern-0) for it, but unable to change color of it as i want this pattern in various colors.
For reference i am attaching image which i want to achieve using diagonal stripes.
I tried to achieve it using pattern-fills but was unable to get it.
Please provide your valuable inputs. Thanks in advance!
The best way is to use the official pattern-fill module:
plotOptions: {
series: {
color: {
pattern: {
path: {
d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
strokeWidth: 2
},
width: 10,
height: 10,
opacity: 0.4
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/0etopfLs/
Docs: https://www.highcharts.com/blog/tutorials/pattern-fills/
I need to set the step between the display lines in Highcharts. I mean it -
200
150
100
50
0
In this y-case step = 50. How can i set this in HighCharts?
This found with the yAxis.tickInterval. For example:
yAxis: {
tickInterval: 50
}
Currently the legend aligns the text to the left. I.e (-- indicates item label and in most cases would be just different colors.
___________________
[-- Legend item 2 ]
[-- Legend item 3 ]
[-- Legend item 244 ]
I would like it so that it does it it like this
___________________
[-- Legend item 2 ]
[-- Legend item 3 ]
[-- Legend item 244 ]
I tried playing around with itemStyle: textAlign: 'right' but no luck. Is this even possible?
You can set useHTML and then define width and text-align:
http://jsfiddle.net/5gjfW/2/
.highcharts-legend-item span {
width:70px!important;
text-align:right!important;
}
http://api.highcharts.com/highcharts#legend.useHTML
http://jsfiddle.net/BYeBa/
yAxis: {
min: 0,
max: 75,
title: {
text: ''
}
I am not sure why I cannot set the max value of the y axis in this highchart. I don't want it to go over 75. None of the data I have populate even goes near the value of 75.
Why does it stay at 100?
This is caused by endOnTick. If you set
endOnTick:false
75 will be your max.
See http://jsfiddle.net/kzoon/BYeBa/4/
You can set tickInterval as 25.
http://api.highcharts.com/highcharts#yAxis.tickInterval
Can anybody give an example of drilldown chart that has min and max for the Y axis labels? Here is the jsfiddle of the example from the Highcharts website.
I have been trying to figure out how to set a min and max for the Y axis labels. So for example instead of starting at 0 i would like to start at 88.
To get the desired result - for example, start yAxis values at 88, you should use this settings:
new Highcharts.Chart({
....
yAxis: {
min: 88,
startOnTick: false // To prevent rounding of this value.
},
....
});
Hope this helps.