I am working on Highstock chart and I want to apply SoftMin and SoftMax to the xAxis. But it is not working.
Here is the code which I try to set SoftMin and Max:
chart.xAxis[0].update({
softMax: (new Date(2022, 11, 01)).getTime(),
softMin: (new Date(2017, 11, 01)).getTime()
}, true);
chart.xAxis[1].update({
softMax: (new Date(2022, 11, 01)).getTime(),
softMin: (new Date(2017, 11, 01)).getTime()
}, true);
JSFiddle Sample
It is not working because of the xAxis.ordinal which is set to true by default in Highstock. Disable it and it will work as expected.
Code:
xAxis: {
ordinal: false
}
Demo:
https://jsfiddle.net/BlackLabel/25yncsv0/
API reference:
https://api.highcharts.com/highstock/xAxis.ordinal
Related
I want to create highcharts with auto scroll in axis and moving on every 5 seconds.
I also hide the x-axis scroll bar. It is hide by scrollbar enabled : false.
My fiddle is : http://jsfiddle.net/kj63cL1v/
xAxis: {
type: 'category',
max: 6,
scrollbar: {
enabled: true
},
tickLength: 0
},
Create an interval after a chart is generated and call setExtremes method. Example:
setInterval(() => {
const xAxis = chart.xAxis[0];
xAxis.setExtremes(xAxis.min + 1, xAxis.max + 1);
}, 5000);
Live demo: http://jsfiddle.net/BlackLabel/5yha7xwv/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
I built an area chart with data from a google spreadsheet and a chart update function on button click: see fiddle
The chart update function changes the column of the spreadsheet that is displayed in the chart:
$(document).ready(function(){
$("#total").click(function(){
var chart = $('#container').highcharts();
chart.update({
yAxis: [{
min: -6000,
max: 6000,
tickPositions: [0, 2000, 4000, 6000]
},
{
min: -600,
max: 600,
tickPositions: [200, 400, 600]
}],
data: {
seriesMapping: [{
x: 0,
y: 1,
case_bis4: 2,
case_5bis14: 3,
case_15bis34: 4,
case_35bis59: 5,
case_60bis79: 6,
case_ab80: 7,
death_total: 8,
death_bis4: 9,
death_5bis14: 10,
death_15bis34: 11,
death_35bis59: 12,
death_60bis79: 13,
death_ab80: 14
},
{
x: 0,
y: 8,
case_total: 1,
case_bis4: 2,
case_5bis14: 3,
case_15bis34: 4,
case_35bis59: 5,
case_60bis79: 6,
case_ab80: 7,
death_bis4: 9,
death_5bis14: 10,
death_15bis34: 11,
death_35bis59: 12,
death_60bis79: 13,
death_ab80: 14
}]
}
});
});
});
Unfortunately each time a button is clicked one more data point gets lost. What went wrong?
Thank you for sharing it. It seems like a bug to me, I reported it on the Highcharts Github issue channel where you can follow this thread: https://github.com/highcharts/highcharts/issues/14189
As I understood you would like to create a custom legend and I think that it could be achieved in a different way (to avoid the chart.data update). My idea is to loop through the series and hide or show them.
Here is a simple demo: https://jsfiddle.net/BlackLabel/emyq7j94/ - you can test it by clicking the ab80, 60 bis 79 and alle.
Each button triggers a similar functionality (which you can save as an outstanding function):
chart.series.forEach((s, i) => {
if (i !== 5 && i !== 12) {
s.hide()
} else {
s.show()
s.update({
visible: true
}, false)
}
})
I'm trying to create some high carts bar with gradient decrees for each bar
bar decrees color become blurry for each range, for rank 1 bar the color is solid
this is my sample picture
anyone can help me
You can use colorAxis from heatmap series by wrapping colum's prototype:
var columnProto = Highcharts.seriesTypes.column.prototype;
columnProto.axisTypes = ['xAxis', 'yAxis', 'colorAxis'];
columnProto.optionalAxis = 'colorAxis';
columnProto.colorKey = 'y';
Highcharts.wrap(columnProto, 'translate', function(proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
Highcharts.seriesTypes.heatmap.prototype.translateColors.call(this);
});
Highcharts.chart('container', {
series: [{
type: 'bar',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}],
colorAxis: {
minColor: '#c6e48b',
maxColor: '#196127',
min: 1,
max: 9
}
});
Live demo: http://jsfiddle.net/BlackLabel/u8wgh0dk/
API Reference: https://api.highcharts.com/highcharts/colorAxis
When data labels overlap in Highcharts, only one data label is displayed. This seems to be handled randomly. See fiddle:
http://jsfiddle.net/lamarant/rmxLd1d4/
$(function () {
$('#container').highcharts({
title: {
text: 'Label Test'
},
series: [{
type: 'line',
data: [ 10, 10, 10, 10, 10, 10, 50],
dataLabels: {
enabled: true,
color: 'blue',
zIndex: 10
},
zIndex: 10
},
{
type: 'line',
data: [ 11, 11, 11, 11, 11, 11, 49],
dataLabels: {
enabled: true,
color: 'red',
zIndex: 10
},
zIndex: 20
}]
});
});
Notice that the first data label displayed in the chart is from the second series while the rest are from the first series.
I tried setting the priority of the label display using zIndex in both series and series.dataLabel with no luck.
Is there any way to set it so that a designated series always takes priority when Highcharts determines which label to display?
One possible fix is supplying a labelrank for each point, which is used to evaluate their sorting order. If you supply this rank for each point in a series, that series should be considered "above" series without such a rank (or with a lower rank integer value).
In code, manually for each point:
series: [{
data: [
{ y: 11, labelrank: 1 },
{ y:11, labelrank: 1 }
// ...
],
// ...
}]
In code, using the callback function (JSFiddle):
$('#container').highcharts({
// Options ...
}, function() {
var mySeriesIndex = 1;
// For each point in the preferred series
for(i = 0; i < this.series[mySeriesIndex].points.length; i++)
// Set a labelrank
this.series[mySeriesIndex].points[i].labelrank = 1;
});
My current take on the issue itself is this:
With the current implementation of the overlap logic it seems to me that this is a bit of an unintended behavior. The source code uses Array.sort in a way that shifts the positions of the point labels, since Array.sort is not guaranteed to be stable (same-value items wont retain their original order).
If you check your example in Firefox it should work as intended (their implementation of Array.sort is different), while in Chrome it doesn't (not stable). You could hope that this little feature is fixed.
I am using Highstock charts, and there is a requirement to show line graphs with a fixed x-axis range, irrespective of the data. Setting the xAxis min and max properties accomplishes that for me.
The trouble comes when I try to use the navigator. The API documentation says that the you can include an xAxis object in the navigator options which can contain all of the same properties, but here, setting the min and max properties doesn't seem to do anything: the xAxis on the navigator still begins and ends at the data min and data max. Instead, I'm trying to get it to use the same xAxis settings as the main chart.
I've thought about inserting fake data points into the series at the desired min and max (with a value of null), but was hoping there was a better way to accomplish this.
A simple example can be found here: http://jsfiddle.net/j6GFq/2
$('#container').highcharts('StockChart', {
chart: {},
navigator: {
xAxis: {
min: 0,
max: 100,
ordinal: false
}
},
xAxis: {
ordinal: false,
min: 0,
max: 100
},
rangeSelector: {
enabled: false
},
series: [{
data: [
[10, 20],
[20, 40],
[50, 10]
]
}]
});