I have trouble to make my Highchart work properly for my usage.
I have a datetime axis with "column/bar" display and multiple series. The problem is that the series "overlap" on each other, making it complicated to read (the mouseover is complicated because series hide each other).
You can see what it does here : https://jsfiddle.net/okbguc03/3/
I just would like to prevent overlapping (i guess highchart would have to "stretch time" in order to display the bar on side of each other).
I've tryed playing with "padding" and "pointwidth" and i've disabled stacking, but it doesn't help (and i need pointwidth because the bars are very thin).
"plotOptions": {
"column": {
"stacking": "null",
pointWidth : 10
},
Thanks in advance for your help =)
The answer seems to be that you can't force highcharts to disable overlap and the line chart is the best display for this kind of data
Related
I'm not sure if this is possible, but I have separate, stacked highcharts. I'd like to keep them on the same graph, but stacked on top of each other, resetting the y axis to 0 each time. Here is a Fiddle of them all separate:
I've also attached an example graph of what I am imagining. The blue horizontal lines represent each new chart series's 0 point.
Sample graph example
//random line so it will let me post the fiddle. Ignore this
You can also achieve a similar effect using different height of multiple yAxis.
Example:
http://jsfiddle.net/6b9prwjc/
You are making highchart for each series in the array seriesAll by looping through it and that is causing it to create seperate charts for each series. If you just create 1 highchart and give it the series array, it will plot all the series on the same chart. Here is a modified version of your code to give you what your looking for.
https://codepen.io/Nasir_T/pen/zdzdrW
Also please check out the docs of highcharts and it will give you all the information you need. E.g. here is the combined charts link:
https://www.highcharts.com/docs/chart-and-series-types/combining-chart-types
[Edit for stacking option]
You can also stack them on top of each other by setting the plotOption > series > stacking properties. e.g.
plotOptions: {
series: {
stacking: 'normal'
}
}
Learn more on stacking in the following doc link.
http://api.highcharts.com/highcharts/plotOptions.area.stacking
Hope this helps.
In my highstock charts i required label on the left side of the graphs. When i used opposite: false + align: left for labels they are positioned above graph. But i want to start graph rendering after labels ends.
Left side labels without required graph render
I saw solution for my problem in Highcharts not in highstock some time before. But now i cant find it to show what exactly i need
Expected result
Thanks in advance
OK, so you want the labels inside the plot area.
You can do this by adding
labels: {
align: 'left',
x: 0
}
to your yAxis properties.
This moves the starting point of the labels to the axis line, and extends the labels to the right from that point. If you want them pushed further inside, just increase x.
The problem that you'll run into is that the plot will not respect the label placement - your line will still start at the same point, as if the labels weren't there.
Normally, you could just use the minPadding setting on the xAxis to increase the space for the labels, but this doesn't work in the case of the navigator, as explained here:
http://api.highcharts.com/highstock/xAxis.minPadding
When the axis' min option is set or a min extreme is set using axis.setExtremes(), the minPadding will be ignored
I am sure there is some work around for this problem, but I do not have the solution currently.
Updated fiddle:
http://jsfiddle.net/d6mre68v/
I've been playing around with a highcharts bar chart and noticed some strange behavior. If I have a long name in the x axis (the categories), and if I have labels enabled to show up on the bars, not all the labels will appear. If I remove the long x axis name, then the label that wasn't appearing on the bar before will suddenly appear. I have a working Jsfiddle example here:
https://jsfiddle.net/p55t0bmf/ (notice label isn't appearing for one of the bars, should say 5 but nothing is there)
I placed a long name in the categories section to trigger this behavior:
xAxis: {
categories: ["LONG NAME THAT WILL BREAK US"]
}
Does anyone know why this would be happening, and is there a way to fix this behavior (without resorting to short x axis names of course)?
Set allowOverlap to true. When you have longer xAxis labels, then you have less horizontal space. Labels have padding which can overlap and hide some of them. Anyway, your demo works for me exactly the same way with or without long xAxis category.
Demo with all labels: https://jsfiddle.net/p55t0bmf/1/
stacking option cause this problem. If you set the stacking, then highchart change the label opacity automatically.
Solution : Remove stacking options from chart, if you dont need or write css to override label opacity.
I'm currently using a the NVD3 discreteBarChart but I have a lot of data and the labels on the X axis, which are dates in my application, are encroaching upon each other like this : ). This doesn't happen with a multiBar or a linePlusBar chart, where the labels are automatically adapted :
How can I prevent the lablels on the discreteBar chart to impinge on the others?
Thanks for your answers!
Little late to answer, but to get similar results but using multi-barchart as mentioned by Lars , you can use following command to get a similar graph (i.e hide "stacked" and "grouped", as well as legend buttons).
n1$chart(showControls = FALSE, showLegend = FALSE)
I have plotted chart bars as Stacked, but overlapped one on another. but only last two series need to overlap, not first one. First series(additional income) need to be plot as same as 'stacked : "normal"' do.
Here is the jsfiddle to explain my experiment with highchart.
Is there any option for Series object to achieve that?
Thanks
Peter
You should disable gruping or set pointWidth http://api.highcharts.com/highcharts#plotOptions.column.pointWidth