I want to be able to click a button and toggle y-Axis plotOptions from series rendering by absolute value to compare by percent change.
I have played with jsfiddle here https://jsfiddle.net/pn5md4rz/1/
What I have noticed is that if I enable plotOptions in the options it will render always by change of value or percent change, but if I remove it (commented) it will always render by value. I want a way to switch between both modes of y-axis through button toggle.
You need to add click event callback function to the button and update the chart in that function with variable compare and showInNavigator values.
document.getElementById('toggle-button').addEventListener('click', function() {
compare = compare ? false : 'value';
chart.update({
plotOptions: {
series: {
compare: compare
}
},
series: [{}, {
showInNavigator: !!compare
}]
});
});
Live demo: https://jsfiddle.net/BlackLabel/bz3are69/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#update
Related
using highcharts#9.1.1
I am rendering a chart with initial rangeSelector = 1y but it's not rendering properly, the chart selects the last year of data instead of the first year. my data is ordered asc by timestamp btw.
same happens when I explicitly select a range, it computes the range from the current end date in the slider as opposed to the start date.
how can I make it behave differently?
https://jsfiddle.net/6vLgdrx7/4/
You can use setExtremes method in chart's load event and set the initial selected area.
chart: {
...,
events: {
load: function() {
const xAxis = this.xAxis[0];
xAxis.setExtremes(
xAxis.dataMin,
xAxis.dataMin + (xAxis.max - xAxis.min),
true,
false
);
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/hm4xLzft/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
Would love some help here with highcharts,i have attached an image i want to accomplish 2 things here
First: Is it possible to place the data of the yAxis in this case a day between 2 plotlines and the datalabel in between those 2 lines instead of getting crossed in the middle by it? For example i want the 30th of April under that line and the datalabel above that line as well positioned according to the day
Second: How can i change the color of the numbers to black when the color is that light green, it makes it hard to read.
You can set yAxis.type as category and use formatter to imitate dates.
Use dataLabels.formatter to change a color depending on a point value.
series: [{
...,
dataLabels: {
enabled: true,
formatter: function() {
if (this.color === '#FF00FF') {
return '<span style="color: orange">' + this.y + '</span>';
}
return this.y;
}
}
}],
yAxis: {
type: 'category'
}
Live demo: http://jsfiddle.net/BlackLabel/qxfa9b0c/1/
API Reference:
https://api.highcharts.com/highcharts/yAxis.type
https://api.highcharts.com/highcharts/series.heatmap.dataLabels.formatter
I'd like to remove the value box from a Highcharts angular gauge.
I'm not sure it is possible...I have tried messing around with the JSFiddle demo trying to remove it and haven't been able to.
I was able to remove the minor and major ticks by adding
minorTickInterval: 'none',
tickPixelInterval: 'none'
But I can't figure out how to remove the value from the middle of the gauge.
or you can achieve the result you want just by adding the following lines:
series: [{
dataLabels: {
enabled: false
}
}]
You should add dataLabels.formatter to the series part of your gauge to remove it.
dataLabels: {
formatter: function () {
return null;
}
},
Live example: jsFiddle
I have a boxplot with a scatter plot of the raw values drawn on top of it. I'd like to change the boxplot tooltip (when you mouse over) to display the total number of points in the scatter series.
tooltip: {
useHTML: true,
headFormat: '{point.key}',
pointFormat: 'Median: {point.median}'
}
point and series are for the boxplot, is there a way to reference another series like series[1] and how would you get the total. Or can I reference an array with the total values.
Similar to How to edit the tooltip text in a highcharts boxplot
this.series contains a reference to the chart object, which in turn has a reference to the chart.series array.
tooltip: {
formatter: function() {
var arrayOfSeries = this.series.chart.series;
console.log(arrayOfSeries); // doing something with all the series!
}
},
Fiddle here.
According to formatter, you can reference to the series object via this.series. So for the total number of points in the series, you can try
tooltip: {
formatter: function() {
return this.series.data.length;
}
},
It seems shared tooltip doesn't work on scatter, https://github.com/highslide-software/highcharts.com/issues/1431. So I don't know how to reference another series. Otherwise you can use this.points[i].series.
I need to make one label responsible for multiple series data.
As shown in this fiddle http://jsfiddle.net/HHqGN/ , I have two series:
test(bid) and test(ask) and two labels responsible for each of them.
What I need is one label named test instead of these two to toggle both serie 1 and serie 2 at the same time
Sample code from fiddle:
$(function() {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
enabled : false
},
legend : {
enabled : true
},
series : [{
name : 'test(bid)',
data : [[1152057600000,57.00]
}, {
name : 'test(ask)',
data : [[1152057600000,58.00]
}]
});
});
You can disable displaying second serie in legend, by showInLegend parameter and then use legendItemClick to show/hide both series
http://jsfiddle.net/HHqGN/1/
legendItemClick:function(){
$.each(this.chart.series,function(i,serie){
if(serie.visible)
serie.hide();
else
serie.show();
});
return false;
}
In case anyone is looking for linked series have a look at the linkedTo parameter of a series. As per definition:
linkedTo: StringSince 3.0
The id of another series to link to. Additionally, the value can be
":previous" to link to the previous series. When two series are
linked, only the first one appears in the legend. Toggling the
visibility of this also toggles the linked series.
Source: http://api.highcharts.com/highcharts