I'm having trouble with a chart where the height of the chart is not scaling to fill the area. The chart object itself is scaling correctly into the container div, it is the yAxis itself that is stuck in a shrunk state. I believe it has something to do with working with smaller numbers, but I'm not 100% certain
Any guidance would be much appreciated
Edit - JSFiddle
"yAxis": {
"min": 0,
"categories": [],
"title": {
"text": "Hit Rate"
},
"stackLabels": {
"enabled": false
},
"labels": {
"overflow": "justify"
},
"tickInterval":0.1
}
From the doc :
tickInterval: number
The interval of the tick marks in axis units. When undefined, the tick interval is computed to approximately follow the tickPixelInterval on linear and datetime axes. On categorized axes, a undefined tickInterval will default to 1, one category.
If you remove the categories: [] option of the y-axis, the graph is auto-scaled correctly.
EDIT : I didn't see you set a tickInterval, but the solution (removing the empty categories from y-axis) still solved the problem.
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
If I have a Highcharts bar or column chart that has a data series with an array of all zeroes, the y axis tick label displays in the center of the y axis, along with an extra y axis. I've experimented with the tick placement and min values but these dont seem to work in the case of this peculiar set of data. see http://jsfiddle.net/davidpmcintyre/mepd17tn/
Here's the highcharts code snippet:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr' ]
},
series: [{
data: [0, 0, 0, 0]
}]
});
});
Assuming (given requirements of your chart):
All data will be positive
You always want to start from 0 on the y-axis
The following code will allow you to left-align your y-axis, and also specify how much of the y-axis you want to show in minimal cases (JSFiddle):
yAxis: {
min: 0,
minRange: 1
}
This will still allow you to have larger ranges on the y-axis as it only kicks in when the value range is less than one. This in turn means you do not have to check your data before setting any values.
It seems that the options startOnTick, and endOnTick have no effect on a boxplot. Is there anyway to align the outermost ticks to the graph edge with a boxplot?
xAxis: {
startOnTick: true,
endOnTick: true,
min: -1,
max: 6,
},
I have tried adding most combinations of minPadding/maxPadding, tickmarkPlacement: between/on, and manually setting ticks with tickPositioner without any luck. The only workaround I have is to shrink min/max so the padding fixes itself. I would prefer a better solution, because this workaround becomes very ugly for dynamic data.
Here is the fiddle demo demonstrating the problem and another with the workaround. Again, is there any way to align the outermost ticks to the graph edge with a boxplot?
Looking into this led me to these comments buried in parts/Axis.js.
if (!axis.single) {
// minPointOffset is the value padding to the left of
// the axis in order to make room for points with a
// pointRange, typically columns. When the
// pointPlacement option is 'between' or 'on', this
// padding does not apply.
minPointOffset = Math.max(
minPointOffset,
isString(pointPlacement) ? 0 : seriesPointRange / 2
);
// Determine the total padding needed to the length of
// the axis to make room for the pointRange. If the
// series' pointPlacement is 'on', no padding is added.
pointRangePadding = Math.max(
pointRangePadding,
pointPlacement === 'on' ? 0 : seriesPointRange
);
}
The issue is caused by the point padding and probably occurs on any column style plot. The padding will be ignored if pointPlacement is set to 'on' or 'between' on the series.
series: {
type: 'boxplot',
pointPlacement: 'on',
data: ...
}
Here is the working fiddle.
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
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
}