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
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/
Highstock example: https://jsfiddle.net/1qz43heo/1/
spacingBottom: 0
Problem: When I add "spacingBottom: 0" the Y axis changes and the lines do not "fill out" the whole space anymore!? Why?
(spacingBottom when not set is 15: https://api.highcharts.com/highstock/chart.spacingBottom)
I'm trying to create a custom pattern fill for highcharts.
It's a horizontal dashed line with alternating starting points from one row to another (the first start at 0,0 the second at 3,10 and so on).
I edited the Highcharts JSfiddle example replacing the custom pattern with the following (here you can find my "final" version) :
color: {
pattern: {
path: {
d: 'M 0 0 H 8 M 14 0 H 22 M 3 10 H 19',
strokeWidth: 0.5
},
width: 22,
height: 20
}
}
The problem is the the two rows of lines have different width.
I can't find any parameter in the documentation to fix this.
I don't know if the problem is in my pattern definition or a highcharts bug.
Any thoughts?
The path as-is moves first to 0,0 and then 14,0, and finally 3,10:
d: 'M 0 0 H 8 M 14 0 H 22 M 3 10 H 19'
You can change that to 0,1 and then 14,1, and then 3,11 and the lines are the same width:
d: 'M 0 1 H 8 M 14 1 H 22 M 3 11 H 19'
The lines starting at 0,0 are centred on the boundary meaning that half the line gets cut off, so just moving them all down by 1 ensures that the whole line is visible.
Updated Fiddle
I have spline chart, with dateTime xAxis and more than 3k points in each of 2 categories: http://jsfiddle.net/jk171505/dmmhL5ha/7/
Is there a way, other than tickInterval, to prevent overlapping labels on xAxis?
I tried to use tickInterval but this isn't the option, as data points are irregular and amount varies (sometimes it's data for period of 2 weeks, sometimes 2 years):
xAxis: {
type: 'datetime',
categories: ["test1", "test"],
tickInterval: 24 * 3600 * 1000 * 31,
Set tickPixelInterval - bigger than label width, to make sure there is enough space between items JSFiddle.
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
}
},
},