Can functionality described here: save chart button of stock tool chart not working in highcharts save also currently selected RangeSelector?
The simplest solution seems to be to overwrite the default saveChart button functionality. In the below example saving all indicators and x-axis extremes should work correctly.
const savedOptions = localStorage.getItem(['highcharts-chart']);
const baseOptions = {...};
H.stockChart('container', H.merge({
navigation: {
bindings: {
saveChart: {
init: function(button) {
var navigation = this,
chart = navigation.chart,
annotations = [],
series = [],
xAxis = [],
yAxis = [];
annotations = chart.annotations.map(annotation => annotation.userOptions);
chart.series.forEach(s => {
if (!s.options.isInternal) {
series.push(s.userOptions);
}
});
chart.yAxis.forEach(axis => {
if (axis.userOptions.className !== 'highcharts-navigator-yaxis') {
yAxis.push(axis.userOptions);
}
});
chart.xAxis.forEach((axis, index) => {
if (!axis.options.isInternal) {
xAxis.push(axis.userOptions);
xAxis[index].min = axis.userMin;
xAxis[index].max = axis.userMax;
}
});
H.win.localStorage.setItem('highcharts-chart', JSON.stringify({
series,
annotations,
yAxis,
xAxis
}));
H.fireEvent(this, 'deselectButton', {
button
});
}
}
}
}
}, savedOptions ? JSON.parse(savedOptions) : baseOptions));
Live demo: https://jsfiddle.net/BlackLabel/r92b475e/
API Reference: https://api.highcharts.com/highstock/navigation.bindings.saveChart
Related
I have a bar chart with labels. Is it possible to get the "points" data by hovering over said labels using custom-events library?
By points data I mean the variable from here:
tooltip: {
useHTML: true,
formatter(this: { points: any[] }) {
}
}
You can loop through all series points and match a point with a label position. Example:
xAxis: {
...,
labels: {
events: {
mouseover: function() {
const points = [];
this.axis.series.forEach(s => {
s.points.forEach(point => {
if (point.x === this.pos) {
points.push(point);
}
})
});
console.log(points);
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/3xvgtw2c/
I use highchart (spider)
I want to give different color for each grid line of y axis.
Is there any elegant way to do that (I mean - without jQuery and complex css selectors)
Please see attached picture.
You can wrap renderGridLine method from the Tick prototype:
(function(H) {
var colors = ['#0050d1', '#de0735', '#00e031', '#ffb300', '#c800ff'],
i = 0;
H.wrap(H.Tick.prototype, 'renderGridLine', function(proceed) {
if (!this.axis.isXAxis) {
this.axis.options.gridLineColor = colors[i];
if (this.isLast) {
i = 0;
} else {
i++;
}
}
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/45fh27tc/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
Or set the color afrer chart initialization in a load event:
var colors = ['#0050d1', '#de0735', '#00e031', '#ffb300', '#c800ff'];
Highcharts.chart('container', {
chart: {
...
events: {
load: function() {
var yAxis = this.yAxis[0];
yAxis.tickPositions.forEach(function(tPos, i) {
yAxis.ticks[tPos].gridLine.attr({
stroke: colors[i]
});
});
}
}
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/xbLtur48/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
https://api.highcharts.com/highcharts/chart.events.load
I'm looking for alternatives for the plug In values in legend.
The plug in uses jQuery and I'm running a Angular 5 application.
Has someone created a solution for that before?
labelFormat: '<span style="color:{color}">{name}</span>: <b>{point.y:.2f} USD</b> ({point.change:.2f}%)<br/>'
Here is a sample of Hicharts using jQuery to access the chart container and display the series value on legend.
To get rid of jquery you can replace jquery .bind method with js addEventListener on chart.container. Next, follow highcharts-angular documentation and create your own wrapper for this plugin. Check demo posted below.
Value-in-legend.js plugin:
(function(factory) {
if (typeof module === "object" && module.exports) {
module.exports = factory;
} else {
factory(Highcharts);
}
})(function(Highcharts) {
Highcharts.Series.prototype.point = {}; // The active point
Highcharts.Chart.prototype.callbacks.push(function(chart) {
chart.container.addEventListener("mousemove", function() {
var legendOptions = chart.legend.options,
hoverPoints = chart.hoverPoints;
// Return when legend is disabled (#4)
if (legendOptions.enabled === false) {
return;
}
if (!hoverPoints && chart.hoverPoint) {
hoverPoints = [chart.hoverPoint];
}
if (hoverPoints) {
Highcharts.each(hoverPoints, function(point) {
point.series.point = point;
});
Highcharts.each(chart.legend.allItems, function(item) {
item.legendItem.attr({
text: legendOptions.labelFormat
? Highcharts.format(legendOptions.labelFormat, item)
: legendOptions.labelFormatter.call(item)
});
});
chart.legend.render();
}
});
});
// Hide the tooltip but allow the crosshair
Highcharts.Tooltip.prototype.defaultFormatter = function() {
return false;
};
});
Next, initialize it in your component:
require("./path-to-your-file/value-in-legend")(Highcharts);
Demo:
https://codesandbox.io/s/j2j7wxwv7y
In highcharts initialization I've set array of only one color. I would like to change this with another array on charts's hover event. In other words chart is default monochromatic and after hover it becomes colorful.
config = {
colors: ["#C0C0C0"]
};
chart = $('#chart').highcharts(config).highcharts()
$('#chart').hover(function(){
chart.options.colors = ["#E84C3D", "#C1392B", '#D25400', "#E67F22", "#F39C11"]
}, function(){
chart.options.colors = ["#C0C0C0"]
});
Unfortunately it doesn't work. How should I do it?
You can set the plotOptions events:
plotOptions: {
column:{colorByPoint:true},
series: {
animation:false,
events: {
mouseOver: function(e) {
//console.log( chart.options);
var options = chart.options;
if(options.colors[0]!='#E84C3D')
{
options.colors=['#E84C3D','#C1392B','#D25400','#E67F22','#F39C11'];
chart = new Highcharts.Chart(options);
}
},
mouseOut: function(e) {
var options = chart.options;
if(options.colors[0]!='#C0C0C0')
{
options.colors=['#C0C0C0'];
chart = new Highcharts.Chart(options);
}
}
}
}
}
demo http://jsfiddle.net/eNMvw/134/
Instad of creating chart multiple time, better is using series.update() and apply colors per bars.
using Highchart, how can we change the zIndex for a line according to its state, or dynamically from a click event ?
I tried :
plotOptions: {
series: {
states: {
select: {
lineWidth: 2,
zIndex:10
}
},
with : this.setState(this.state === 'select' ? '' : 'select'); in the Click event but it doesn't work.
Alright, it's definitely not pretty, but I couldn't find a way to actually set the zIndex, so I had to do some maneuvering to fake it and bring each series to the front in a certain order. Here's the snippet to include:
Highcharts.Series.prototype.setState = (function (func) {
return function () {
if (arguments.length>0){
if (arguments[0] !== ''){
if (typeof this.options.states[arguments[0]]['zIndex'] !== 'undefined'){
this.options.oldZIndex = this.group.zIndex;
this.group.zIndex = this.options.states[arguments[0]]['zIndex'];
}
}else{
if (typeof this.options['oldZIndex'] !== "undefined"){
this.group.zIndex = this.options['oldZIndex'];
}
}
var order = [], i = 0;
$.each(this.chart.series, function(){
order.push({id:i,zIndex:this.group.zIndex,me:this});
i++;
});
order.sort(function(a,b){return (a.zIndex>b.zIndex) ? 1 : -1;});
$.each(order, function(){
this.me.group.toFront();
});
func.apply(this, arguments);
}
};
} (Highcharts.Series.prototype.setState));
And here's the JSFiddle demonstrating:
http://jsfiddle.net/G9d9H/9/
Let me know if that's what you needed.
I think a better solution is to set the series.group.toFront() method on click (I prefer to use it on mouseover)
plotOptions: {
series: {
events: {
click: function () {
this.group.toFront();//bring series to front when hovered over
}
}
}
}