actually I have an issue when I dispatch the event click on plot options of pie due to this generate a redraw of the chart. On my configuration I have this:
plotOptions: {
pie: {
events: { click: e => this.onClick(e) },
...
}
And below this function to emit the selected value:
// Catch the event on click a plot area.
onClick(event): void {
// Emit an event with information of selected plot.
this.plotSelected.emit(event);
}
And when I clicked on some point of the pie chart then all chart redraw return me all data for point in null values.
Hi I found a solution for my problem. Basically I'm using Higcharts with RxJs and assign as data an response for a BehaviorSubject directly. I change the way to assign the series data and my problem it's solved.
Related
I'd like to get some datalabels showing inside segments of a doughnut chart where there is suitable space to do so.
I know I can use negative distance values on the the data labels config options, but I wonder how I can achieve this dynamically based on the values\size of the segments.
Is such a technique achievable? Can I have a mix of data labels outside of the segments connected with lines (connectors) and others inside the actual segments?
My starting point so far based off the official highcharts example pie chart code: https://jsfiddle.net/parky12/tbnjypse/1/
You can for example use chart.load event and change distance, x or y properties for an individual point. For example:
events: {
load: function() {
this.series[0].points.forEach(point => {
if (point.y > 5) {
point.update({
dataLabels: {
distance: -50
}
// avoid redraw after each update
}, false);
}
});
this.redraw();
}
}
Live demo: https://jsfiddle.net/BlackLabel/Lco29fdj/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#update
I have 200 bar series on highcharts, Due to that when i scrolling the mouse, highcharts not loading properly,Hence i want to load the chart series based on the scroll event in highcharts.
xAxis: {
events: {
setExtremes: function (e) {
if (e.trigger === 'scrollbar') {
I want to load the data series here based on scroll
}
},
}
},
I tried this code is working, but dont know how to load the chart data based on scroll. Please help if anyone knows.
I am just starting out with Highstock and I want to provide our users with the option of toggling the connection of the null data points via a button. Here is how I have tried to solve it: jsFiddle
// create the chart
var chart = new Highcharts.StockChart({
[...]
plotOptions : {
series : {
connectNulls : false // default
}
},
[...]
});
// Toggle connect nulls
var connectNulls = true;
$('#connectNulls').click(function() {
chart.plotOptions.series.connectNulls = connectNulls;
connectNulls = !connectNulls;
});
But it has no impact on the graph. All the examples I've found so far concerning toggling on chart configuration are doing dynamic manipulation on the series via the update method, but for the connectNulls I guess this is not possible.
I can always repaint the graph from scratch but I want to avoid this if possible. Say if one user has zoomed into the graph, repainting would cause the zoom to be lost.
Any suggestions?
You can use series.update() and then modify this param.
http://jsfiddle.net/vsmn60gL/3/
I need to integrate highcharts with table that contains related data. Each user's hover event should set particular background color to a table row. I don't know how can I get some information about hovered element in highcharts. I've created some demo to illustrate the problem here
plotOptions: {
spline: {
point:{
events:{
mouseOver: function(e) {
$('span').show().text('hover action').fadeOut();
}
}
}
}
}
As you can see I've manged to get noticed about each hover event but I still don't know which point on charts was hovered. How can I get this?
You can get access to the point's object in that event function via the this property.
To show the series name and the point index of the point you just hovered over you can do:
$('span').show().text(this.series.name + ': ' + this.index).fadeOut();
I want to add a reference series to my charts (i.e. a reference price). Axis.addPlotLine() does it, but I want to be able to toggle this series from the legend; a plain plotLine does not show up in the graph's legend.
Another reason why plotLine does not seem like a good solution is that it does not get accounted for by the viewport calculations. Which means that toggling other series might lead to the plotLine appearing outside the viewport due to zooming.
The simplest way to accomplish what I want would be, to add a dynamic series via chart.addSeries. But it's impossible to call this method from within a triggered addSeries event because chart.addSeries is set to null while in the event handler.
Tying in to the redraw event creates a whole lot of difficulties as well, because render() can't be called anymore.
How would you go about it?
Update:
As per the comment of Pawel Fus, I unsuccessfully tried the following:
[…]
events: {
load: function (event) {
foo = this;
},
addSeries: function(event) {
console.log(foo) // returns chart object as expected
console.log(foo.addSeries) // undefined
}
}
Solution is to store addSeries on load event, and use stored function when adding series. Live example: http://jsfiddle.net/3bQne/808/
events: {
load: function (event) {
foo = this.addSeries;
},
addSeries: function (event) {
if (iterator) {
iterator--;
foo.call(this, {
data: [100, 200, 100, 100, 200, 300]
});
}
}
},
Still you can stick with plotLine only.
If the position of the line is static that is the best way.
If the position is dynamic then you can still go with plotLine.
There are events for adding and removing plotLine on the fly.
API link
removePLotLine() : http://api.highcharts.com/highcharts#Axis.removePlotLine
addPlotLine() : http://api.highcharts.com/highcharts#Axis.addPlotLine
I hope this will help you.