We have a UI requirement to introduce a break in the graph when the first value on the y-axis is not 0. Naturally I started off with setting the yAxis min value to 0 and I decided to introduce a break in the y-axis. Here is the relevant options
yAxis: {
lineWidth: 2,
min: 0,
breaks: [
{
from: 0,
to: 100
}
]
}
With data of
[180, 220, 450, 562]
Now this works great when the data we are using is static but obviously in our case it is not. The data we are getting back is from another service and varies a lot.
Is it possible to get a minimum value of the yaxis that is calculated by highcharts?
I can introduce a break from 0 to that calculated min value?
You guys can see what I have worked on so far:
CodeSandbox
I am mainly doing this because we have a requirement to add the swigly as in the picture
First of all - it seems that you missed importing the broken-axis module.
import HighchartsBrokenAxis from "highcharts/modules/broken-axis";
HighchartsBrokenAxis(Highcharts);
Next, I want to suggest another solution - use the render callback to check the yAxis.minData and do an update on the yAxis.
chart: {
events: {
render() {
const chart = this,
yAxis = chart.yAxis[0],
dataMin = yAxis.dataMin;
if (chartForRender) {
chartForRender = false;
yAxis.update({
breaks: [
{
from: 1,
to: dataMin
}
]
});
}
chartForRender = true;
}
}
},
Notice that I used the chartForRender flag to be sure that the update call will be triggered only once.
Demo: https://stackblitz.com/edit/react-jr5bjw?file=index.js
API: https://api.highcharts.com/highcharts/chart.events.render
API: https://api.highcharts.com/class-reference/Highcharts.Axis#update
Related
I have two charts here where I was using static data for the candles. Let's consider the second Y-axis, where the max value for the few given candles is 215.
In the code I provided, the max value for this y Axes are set as:
yAxis: [{
...
}, {
max: 215*4
}],
From where we can see that I am hardcoding the value for the max as 215*4. What I need to do is, to be able to dynamically get the current value and to multiply it by 4.
I tried it like:
yAxis: [{
...
}, {
max: this.getExtremes().dataMax * 4
}],
But seems is not working and seems that this.getExtremes() can be used in the events only. So is there any way how can I accomplish to set up max value depending on the current displayed max value?
I also tried the following (but it still does not work).
render: function() {
let yAxisExtremesVolumeMax = this.yAxis[1].getExtremes().dataMax;
this.yAxis[1].update({
max: yAxisExtremesVolumeMax * 4
});
},
Anyway, I am not sure that I want to check it this way, since the render event can be called too many times, so I prefer other alternatives.
Try to use this solution with the load instead the render. Doing update in the render callback creates the infinity loop. Code:
chart: {
events: {
load() {
let chart = this,
max = chart.series[1].dataMax;
chart.yAxis[1].update({
max: max * 4
})
}
}
},
Demo: https://jsfiddle.net/BlackLabel/c6qjnf5z/
Try to use this solution...
load: function () {
let { min, max } = this.yAxis[1].getExtremes();
max = max * 4;
this.yAxis[1].setExtremes(min, max);
}
I've implemented a Gantt chart that contains some Gantt long bars and their time period is usually more than a couple of months, moreover, the xAxis of the chart shows years and months as you can see below gif. XAxis's tick-interval should change automatically when I change the range of the Gantt period, but it doesn't!
The desired way is that if I change the time range to a month or smaller, xAxis's tick-interval should change to month/week or month/day.
xAxis: {
maxPadding: 0,
max: Date.UTC(2024, 07, 16),
plotLines: [
// some lines
]
}
Ticks on the xAxis are calculated based on the provided data.
When your data range is wide, the ticks also tend to cover a wider period of time. To change default behaviour you might set the tickInterval inside the afterSetExtremes function with the use of the update method.
Inside you might specify some conditions like for example visible range.
events: {
afterSetExtremes: function(e) {
if (this.chart.xAxis[1].max - this.chart.xAxis[1].min < 36e8) {
this.update({
tickInterval: 36e7
})
} else {
this.update({
tickInterval: undefined
})
this.chart.xAxis[1].update({
tickInterval: undefined
})
}
}
}
API:
https://api.highcharts.com/gantt/xAxis.events.afterSetExtremes
https://api.highcharts.com/class-reference/Highcharts.Axis#update
Live demo: https://jsfiddle.net/BlackLabel/9poc65fn/
I'm eager to find out if its possible to place last value in series to yAxis in highcharts.
It supposed to be simple label with last point value shown on the right side of the charts, dinamically chanhing when we add points to the chart.
thanks!
There are probably several methods.
One that I would use can be seen in this example:
http://jsfiddle.net/jlbriggs/zXLZA/
data: [7,12,16,32,{y:64,dataLabels:{enabled:true}}]
This makes use of the datalabels, which are enabled only for the last data point.
The downside to this is that you need to specify that in your data. Not hard to do, but may not fit your needs.
Another way would be to use a second y axis, and the tickPositions property:
http://jsfiddle.net/jlbriggs/zXLZA/4/
Another possible solution is to use tickPositioner with second yAxis. In such case with dynamic data, everything will be computed itself, see: http://jsfiddle.net/3c4tU/
tickPositioner: function(min,max){
var data = this.chart.yAxis[0].series[0].processedYData;
//last point
return [data[data.length-1]];
}
to get the highest value in any axis and series, use the function getExtreme(). It will find you the extreme value (highest or lowest depending of the argument you put behind). Select the chart, the axis and the series before.
here's an example: (whith your chart associated to the variable 'yourChart')
var highestValue = yourChart.yAxis[0].getExtremes().dataMax;
It will return the highest value of the first Y-axis' associated series.
While this below will return the lowest of the second X-axis' associated series:
var lowestValue = yourChart.xAxis[1].getExtremes().dataMin;
My recommended solution:
plotOptions: {
areaspline: {
fillOpacity: 0.2,
dataLabels: {
enabled: true,
borderRadius: 5,
backgroundColor: 'rgba(252, 255, 197, 0.7)',
borderWidth: 1,
borderColor: '#AAA',
y: -6,
formatter: function() {
if (this.x == this.series.data[this.series.data.length-1].x) {
return this.series.name + ': '+this.y;
} else {
return null;
}
}
}
}
}
we can make use of formatter for this
here is an example to display the last value
http://jsfiddle.net/kgNy4/1/
here is an example to display maximum value
http://jsfiddle.net/kgNy4/
In the example I have put
dataLabels: {
enabled: true
}
so that formatter function will be executed
I hope this will be useful for you
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'm pretty clueless at this point, on some of my charts I am giving these options:
var plotOptions, yAxis;
plotOptions = {
series: {
compare: 'value'
}
};
yAxis = {
labels: {
formatter: function() {
return this.value;
}
},
plotLines: [
{
value: 0,
width: 2,
color: 'silver'
}
]
};
And the chart still displays percentages in the y-axis, just without the % sign. I did a console.log of 'this' in the formatter tag, and the value attribute is correct (that is, returning the value instead of a percentage, but it doesn't seem to be applying it to the chart. Any thoughts?
I actually just ended up using a spline chart instead. Basically what I was trying to say was that the y-axis was displaying the same values where I used "compare: 'percentage'" or "compare: 'value'", but the spline chart seems to be rendering the labels as the actual data points (4000 as opposed to 25%).