I have a column chart in HighCharts and having issues where data labels are running into each other. The graph has a static width and I could potentially have 4 series with at most 4 data points inside each series (4 stacks next to each other). I do have positive and negative values. I am seeing that if the series have similar values, each column is then the same height which causes the data labels to run into each other.
Any way to fix this issue? I cannot seem to find an library option that will help.
Added the groupPadding option worked for me:
plotOptions:
{
column:
{
dataLabels:
{
enabled: true,
formatter: function() { return this.y + '%' }
}
},
series:
{
groupPadding: 0.125
}
},
Have you tried increasing the width of the bars? What about adjusting the font size of the labels? A combination of these 2 APIs should help get around this given you have a static sized chart and a maximum of 4 series with 4 data points...
http://api.highcharts.com/highcharts#plotOptions.column.pointWidth
http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.style
Related
Im trying to sync Highcharts horizontally, stacked with multiple charts vertically- with the goal that the x axis align - some charts have hourly data for a specific range, some have daily data, some have 5-minute data. One grid might have 2 y-axis, zero, or even 3. How to I Align them horizontally?
Image showing unaligned stacked highcharts
You can find a chart with the biggest plotLeft property and apply the same to the others by marginLeft property:
charts.forEach(function(ch) {
if (ch.plotLeft > maxPlotLeft) {
maxPlotLeft = ch.plotLeft;
}
});
charts.forEach(function(ch) {
ch.update({
chart: {
marginLeft: maxPlotLeft
}
});
});
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5012/
API Reference:
https://api.highcharts.com/highcharts/chart.marginLeft
https://api.highcharts.com/class-reference/Highcharts.Chart#update
I've developed a bunch of bar charts in HighCharts cloud with positive and negative values.
First question:
is it possible to have the xAxis appear at the 0 line (not at the bottom of the chart)?
What I've done so far is offset the xAxis so it's placed on the 0 line, which kinda works but I was hoping for a better solution. The other method I was think was to use plotLines code on the yAxis, but I don't get the ticks:
plotLines: [{
color: '#010101',
width: 2,
value: 0,
zIndex: 5
}],
Second question:
is it possible to have the tick marks to appear between each bar, and not just the bars that have an xAxis label?
This is what's rendering for me at the moment, and I'm trying to get a tick between all the bars while showing the same number of labels https://cloud.highcharts.com/show/cLtfEDClS
First question:
You can merge this configuration into chart options in Cloud’s custom code section:
chart: {
events: {
load: function() {
var yAxis = this.yAxis[0];
this.xAxis[0].update({
offset: -yAxis.toPixels(Math.abs(yAxis.min), true)
});
}
}
},
Demo: http://jsfiddle.net/BlackLabel/6712zrod/
It automatically positions x axis so that it works as y = 0 line.
Second question:
Try setting X Axis[0] > Labels > Step to 1.
API reference: https://api.highcharts.com/highcharts/xAxis.labels.step
Explanation from Docs:
To show only every n'th label on the axis, set the step to n. Setting the step to 2 shows every other label.
By default, the step is calculated automatically to avoid overlap. To prevent this, set it to 1. This usually only happens on a category axis, and is often a sign that you have chosen the wrong axis type.
i have a highchart with 4 series. I also only set the min value for each y-axis to 0 cause there arent any negative values possible. now highchart is calculating the max value by itself what is nice BUT i need this for each series itself. The reason is that i have 2 series with very high values from the range up to 5000 and the other two values are relativ small from 0 to 50.
The max value highcharts calculates is used for all four series - so the chart looks like this:
As you can see you can only see the two high value series - the other two arent really visible at the bottom of the chart.
When i disable the two series with the high values the chart looks nice for the other two values:
is there any flag i can use so highchart will calculate the max value / scale per series? Or have i really calculate it by myself - also on zoom and so on.
I found this: https://github.com/highcharts/highcharts/issues/4248
But i thought thats some basic functionality with is needed very often so there has to be something..
greetings
Maybe it would be better to use logarithmic axis type? Your chart would have only one axis adjusted to much difference between the values of series points. When it comes to differences between units of measurement, always you can set the different tooltip.pointFormat definition for specific series.
Highcharts.chart('container', {
title: {
text: 'Logarithmic axis demo'
},
yAxis: {
type: 'logarithmic',
},
series: [{
data: [1, 20, 30, 22, 16, 32, 45, 24, 11, 2],
pointStart: 1,
tooltip: {
pointFormat: '<b>{point.y} km/h</b>'
}
}, {
data: [4500, 3450, 4242, 2348, 5216, 3212, 4564, 3128, 5256, 4512],
pointStart: 1,
tooltip: {
pointFormat: '<b>{point.y} kW/h</b>'
}
}]
});
Live example: https://jsfiddle.net/bfnj4mp8/
API Reference:
https://api.highcharts.com/highcharts/yAxis.type
https://api.highcharts.com/highcharts/series.line.tooltip.pointFormat
I want to draw basic line chart.
When the data type of x-axis is numerical,
I can use the following options to draw this chart when the number of x labels is larger than 1000
plotOptions: {
line: {
turboThreshold: 2000,
},
series: {
turboThreshold: 2000,
}
}
But it seems not work when the data type is categorical and the number of category in x-axis is too large (> 1000 categories)
The link I had tried:
Test on jsfiddle
Is there any solution about this problem?
Many thanks
Check this fiddle: http://jsfiddle.net/am2k9c1t/
Code:
xAxis: {
tickInterval:10,
min:1200,
}
Set tickInterval value in xAxis.
example:
xAxis: {
tickInterval:100
}
Test it here
Two Part Q:
Why is high charts not correctly aligning and displaying the following date on the x axis?
How can I align the date on the x axis with the points in each series?
I have tried adjusting to tickinterval to various values but to no avail on either issue.
tickPixelInterval: 200
Fiddle->http://jsfiddle.net/EwpWh/
Use datetime axis instead of linear, see: http://jsfiddle.net/Fusher/EwpWh/5/
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%m/%d', this.value);
}
},
tickPixelInterval: 200
},
However if you want to have ticks exactly in the same place as points are, you need to use one of:
tickPositions: http://api.highcharts.com/highstock#xAxis.tickPositions
tickPositioner: http://api.highcharts.com/highstock#xAxis.tickPositioner