Similar to this question: Is it possible in highcharts to have 2 charts, sharing the same x-axis, but next to one another?
Is it possible to have two xaxis, but instead of side-by-side or on top of each other, to have them alternate. i.e. first column is from axis0, second is from axis1
Yes, it is. Since you did not provide any code on what you had tried here is a basic example. Do something like:
yAxis: [{
min: 0,
title: {
text: 'Rainfall (mm)'
}
},{
min: 0,
title: {
text: 'Europe Site Rainfall (mm)'
}
}],
As far as alternating column to whatever axis you can handle that by how you add the series and what axis you assign them to.
Related
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 use two types of graphics in one, and the same categories in y-axis for both.
//My code
https://jsfiddle.net/cyt8caLz/
Thanks for your help.
To do this you can use the yAxis.linkedTo property. From the docs:
Index of another axis that this axis is linked to. When an axis is
linked to a master axis, it will take the same extremes as the master,
but as assigned by min or max or by setExtremes. It can be used to
show additional info, or to ease reading the chart by duplicating the
scales.
So you could do something like:
...
yAxis: [{ // Primary yAxis
max: 100,
gridLineWidth: 0,
title: {
text: null
},
tickInterval: 10
}, { // Secondary yAxis
title: {
text: 'Toneladas'
},
linkedTo: 0
}],
...
I'm outputting a series of highcharts on a page. In some instances, all data for the specified time period may come back with 0 values.
In such a case, the chart looks like this: http://jsfiddle.net/charliegriefer/KM2Jx/1/
There is only 1 y-Axis label, 0, and it's in the middle of the chart.
I'd like to force that 0 value for the y-Axis to be at the bottom of the chart, which would be consistent with other charts on the page that do have data.
Have tried various yAxis properties, such as "min: 0", "minPadding: 0", "maxPadding: 0", "startOnTick: true".
Seems it should be pretty straightforward, but I'm at a loss :(
Relevant yAxis code:
yAxis: {
min: 0,
minPadding: 0,
startOnTick: true,
title: {
text: ""
}
},
I've found another (and very simple) solution:
You can set y-axis minRange property:
yAxis: {
...
minRange : 0.1
}
This makes Highcharts render yAxis min and max values when all data is 0.
UPDATE:
Highcharts 4.1.9 fix also needs:
plotOptions: {
line: {
softThreshold: false
}
}
updated js fiddle
Only way I could get it to show it "correctly" was by also providing an yAxis max value. I think this is a HighCharts issue when you provide no data elements with a y-value. It draws the best chart it thinks it can.
I had also posted this to the HighCharts forum, where I got a response that seems to work. Unfortunately, it will involve me doing some pre-processing of the data prior to rendering the charts in order to check for all "0" data values... but it'll work. Just wish there was something more "built-in" to HighCharts.
So after summing up the "y" values, if I get 0, the y-axis properties should look like this:
yAxis: {
minPadding: 0,
maxPadding: 0,
min: 0,
max:1,
showLastLabel:false,
tickInterval:1,
title: {
text: ""
}
}
See: http://jsfiddle.net/KM2Jx/2/
The keys seem to be the "max" and "showLastLabel" properties.
Here is a fix I came up with that doesn't require any preprocessing of the data and just let highcharts do it, like it used to before the update. http://jsfiddle.net/QEK3x/
if(chart.yAxis[0].dataMax === 0)
{
chart.yAxis[0].setExtremes(0, 5);
}
You only need to check the first series axis, as if the first one is not 0 then the problem won't occur. I might submit a pull request for this to high-charts, though I kinda feel like they intended for this functionality for some reason.
Since Highcharts 5.0.1, you can also use softMax.
softMax: Number
A soft maximum for the axis. If the series data maximum is greater than this, the axis will stay at this maximum, but if the series data maximum is higher, the axis will flex to show all data.
yAxis: {
min: 0,
softMax: 100,
...
}
Here is an example with a column chart : http://jsfiddle.net/84LLsepj/
Note that currently, in Highcharts 5.0.7, it doesn't seem to be working for all types of charts. As you can see in this other jsfiddle, it doesn't work with line chart.
Just add "min" option
yAxis: {
min: 0
}
For Highcharts 5.x.x, you should be able to just specify:
yAxis: {
softMin: 0,
softMax: 1,
};
This won't work for line chart, which requires that you also set minRange in the same config object as above. Experiment with different values, since defining for example minRange: 6, created a range on yAxis between 0 and 4.
minRange : 1 or whatever you feel so to be displayed in fractions of
softMax : 100 or whatever you feel so
yAxis: {
minRange : 1,
softMax: 100
}
I have a graph which looks like:
http://www.google.com/imgres?hl=en&sa=X&biw=1148&bih=538&tbm=isch&prmd=imvns&tbnid=ImVcaOUrw9RZ8M:&imgrefurl=http://peltiertech.com/WordPress/stack-columns-in-order-of-size-with-vba/&docid=Wy54Uzfs1JDBAM&imgurl=http://peltiertech.com/images/2009-05/StackChart4.png&w=502&h=331&ei=4fxlUOLCFMzSigLesIGYDQ&zoom=1&iact=hc&vpx=271&vpy=229&dur=1078&hovh=182&hovw=278&tx=195&ty=91&sig=113812968337335397921&page=1&tbnh=132&tbnw=199&start=0&ndsp=10&ved=1t:429,r:1,s:0,i:77
But I want a graph which looks like: http://www.google.com/imgres?hl=en&sa=X&biw=1148&bih=538&tbm=isch&prmd=imvns&tbnid=NFn2T8iaojOpvM:&imgrefurl=http://peltiertech.com/Utility/ClusterStackUtility.html&docid=_9NYGInExJfrmM&imgurl=http://peltiertech.com/Utility/pix/clusterstackcolumns.png&w=282&h=207&ei=4fxlUOLCFMzSigLesIGYDQ&zoom=1&iact=hc&vpx=509&vpy=237&dur=85&hovh=166&hovw=226&tx=52&ty=80&sig=113812968337335397921&page=1&tbnh=150&tbnw=203&start=0&ndsp=10&ved=1t:429,r:2,s:0,i:80
* ABOVE ARE JUST AN EXAMPLE OF THE GRAPH TO SHOW WHAT I WANT. NO INTENTION COPYING ANYTHING. THESE ARE RANDOM IMAGES FROM GOOGLE SEARCH.
Thanks
There are various options available in the highchart yAxis object, allowing you to customize it in almost any & every way.
yAxis: {
gridLineWidth: 0,
// tickColor: 'black',
tickLength: 5,
tickWidth: 1,
tickPosition: 'outside',
labels: {
align: 'right',
x:-10,
y:5
},
lineWidth:1,
// lineColor:'black'
}
I highly encourage you to have a look at the awesomely useful highcharts api
"Hiding grid line but retaining ticks | Highchart & Highstock" # jsFiddle
Which I am passing to:
series: [{
name: 'Fixed bugs',
data: fixed,
pointWidth: 40
}, {
name: 'Assigned Bugs',
data:assigned,
pointWidth: 40
}, {
name: 'Re-Opened Bugs',
data: Reopened,
pointWidth: 40
},
{
name: 'Closed Bugs',
data: closed,
pointWidth: 40
}]
to this chart and I have the data like this :
data: fixed=[3,5,5,8]
data:assigned=[0,1,0,0]
and follows. Now I want to show the column with zero value to... For me its not showing the column value with zero.
minPointLength will work. Use this.
plotOptions: {
column: {
minPointLength: 3
}
}
You can do this quite simply with the minPointLength option. It sets the minimum number of pixels per column, default is 0, so zero values don't show up. It's in the docs here.
Try this JSFiddle
Here is a way to do it - although I think just having the column be zero-valued and not visible is the best way.
Find a very very low number that none of your data points would ever have but still keep it >0. Let us say it is .005. When you bring in your data any value that is 0 assign it this .005 value. In your tooltip formatter do an IF on the value. If it is .005 then make it 0. This way you get to see the "zero" column but the tooltip displayed will be 0 as well. If you are doing any kind of calculation on the stacked columns then you need to account for this non-0 0 value in there as well.
Not sure what you are trying to display, but maybe you could try to show the datalabels like this:
plotOptions: {
series: {
dataLabels: {
enabled: true,
color: 'gray'
}
}
}
Attempt at demo