I have the chart
Now if data is equal 1 then the line is hard to see below image
I write:
minPadding: 0.08,
maxPadding: 0.08,
but this doesn't work
How to shift the graph down?
The problem is that when you you set minPadding to 0.08 you get the padding, but using tickPositioner starting on 1 it looks like not, because you need more space to show the padding.
So change it's start point from 1 to 0.
tickPositioner: function(min, max) {
return [0,10,20,30,40];
}
demo
Update - According to the comment:
So set startOnTick to false and min to 0, this will force to show the padding because the min is 0.
demo1 demo2
It should be false by default but it seems that if you explicitly set
startOnTick: false
Then you get the desired spacing:
Updated fiddle here.
Related
I set the max value for yAxis but in some situation, I see a value more than max value that I set for Highchart.
I need in any situation max value will be shown in yAxis.
By default Highcharts computes values for ticks and may round up the maximum extreme so that it has the same value as the last tick.
You can modify ticks in tickPositioner callback to make sure that the max value will always be shown as a tick:
yAxis: {
max: 110,
min: -20,
tickPositioner: function() {
var tickPositions = this.tickPositions,
lastTick = tickPositions[tickPositions.length - 1],
max = this.options.max;
if (lastTick > max) {
tickPositions.pop(); // remove last tick
tickPositions.push(max);
}
}
},
Live demo: http://jsfiddle.net/kkulig/8k4skeh9/
API reference: https://api.highcharts.com/highcharts/xAxis.tickPositioner
With tickInterval (API) it's works
Fiddle
Edit :
For dynamic data you can use SetExtreme method API or update to update the tickInterval API
I need to align table with highcharts, but chart has irregular padding on the edges, it's based on percentage, I guess.
I would like 30 to stick to the left edge of chart (close to 3) or set it distance manually in pixels. How can I do that in highcharts?
Based on #SebastianBochan suggestions, this is complete solution
xAxis:
startOnTick: true
endOnTick: true
minPadding: 0
maxPadding: 0
Try something like this:
yAxis: {
offset: -15
},
Check this fiddle: http://jsfiddle.net/jcxfhkht/
I'm trying to display a solid gauge with a "strange" max value, that is 96 (hours).
I'read that max and min value are elaborated by highcharts to set ticks, ranges etc but I don't understand why I can't display such a value or even other rounded values like 90 below 100.
Any idea?
The problem may be that the chart is generating a default tick interval e.g. 10, which adds up to 100.
You may be able to get what you want by specifying a tickerInterval which divides into 96 (e.g. 8).
yAxis: {
min: 0,
max: 96,
tickInterval:8,
http://jsfiddle.net/Vn4My/
You can use any max value, only thing is you should divide it by 1000 to get the tickInterval value, for example:
yAxis: {
min: 0,
max:96,
tickInterval:(96/1000),
},
Working example: http://jsfiddle.net/NareshChennuri/whuu5qbt/
To get the exact custom max value :
tickPositioner: function() {
return [this.min, this.max];
},
min: 0,
max: 6924,
refer this issue on github
Try This I am also facing the same issue but I resolve that issue this solution may be useful for you.
yAxis: {
min: minData,
max: maxData,
tickPositions: [minData, maxData]
},
Add tickPositions: [minData, maxData];
pls check similar example Example
Ref reference click here
I hope this is enough.
Thanks,
PVS
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.
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
}