Can I change series array completely in highcharts - javascript

I have a requirement where I need to change series array completely in the chart,
I have 2 legends in my chart, I wish to load a chart with one disabled legend, that's working fine,
now when the user clicks on the disabled legend corresponding data should be added automatically to the chart,
I tried same with chart.series.addSeries(), but that is giving different issues, as the new data which is to be added is not only after the first legend but it's in between those legends
chart
For eg: chart loads, with just grey legends, orange is hidden or is not added at all, on clicking on the orange colour legend I want to add this data to that chart, Please check the chart in the image
is there any way to replace series array completely.
Something like
chart.update({
series:newSeriesArray
});
I am using the bar chart from highchart.
Thanks in advance.

I have 2 legends in my chart
Do you have a separate legend for each series or do you mean legend item for each series?
Highcharts provide a possibility to set data to particular series - series.setData() method. So when a chart is initialized you can create empty series (series with name, color etc but without data array) with property visible: false, then your series will be hidden and legend item disabled:
{
name: 'Year 2016',
data: [],
visible: false
}
When user clicks legend item plotOptions.series.events.legendItemClick function will be invoked (if defined). In this function, you can set data to this particular series using series.setData() as mentioned above:
plotOptions: {
bar: {
events: {
legendItemClick: function() {
if (!this.data.length) {
this.setData([665, 234, 2344, 123, 23])
}
}
}
}
}
Demo:
https://jsfiddle.net/wchmiel/uLfcknsb/

Related

ChartJS: How to force redraw after hiding data items clicking on legend?

I've a ChartJS pie chart, where I draw the labels myself.
This works fine - until the legend comes into play.
const options = {
layout: {
...
},
plugins: {
chartLineLabelPlugin: {
...
},
legend: {
display: true
},
}
};
Using the legend, the user can click on labels and thus hide this single data item.
The pie chart is redrawn but the afterDraw function of other plugins is never called.
How can I force to redraw the chart in a way, that the afterDraw is called clicking on legend items?
How can I identify the hidden data items?

How to hide xAxis category of a hidden series in highcharts boxplot?

I'm trying to hide a certain series by clicking on the legend item and/or using the hide() method. The series gets hidden, but the category is still visible on the xAxis. In some other solutions for other charts, like this column chart solution, breaks were suggested, but that doesn't work on the boxplot chart. Only the leftmost and rightmost categories get hidden. Here's a jsfiddle of the boxplot that's not working:
https://jsfiddle.net/mjan7y48/
In the same application I have a column chart that hides its category immediately without any trouble. Any idea how to solve this issue?
You need to disable grouping for this solution to work:
plotOptions: {
series: {
grouping: false,
...
},
}
Live demo: http://jsfiddle.net/BlackLabel/w6nhvge7/
API Reference: https://api.highcharts.com/highcharts/series.boxplot.grouping
Importing Highstock solved the issue.

Highcharts: show series on legend but hide on chart

Is there a way in highcharts where we can hide a series from the chart, but still display it on the legend?
Alternatively, can we add an imaginary/pseudo legend item but not really existing in the chart?
For context: the client asked us to color the bars depending on their category (the first 10 bars should be the default color dark blue, the next 2 bars would be colored blue, the last 3 bars light blue). Now they're requesting we put 3 legend items: Group A (for the first 10 bars), Group B (for the next 2), Group C (for the last 3). Group B and C do not need to be clickable as they are imaginary legends.
You can set up any number of dummy series, with no data, which will set up an entry in the legend.
To make sure the dummy series do not take up any space in the plot area, you can set grouping: false in the plotOptions.
Code:
plotOptions: {
series: {
grouping: false,
events: {
legendItemClick: function() {
return false;
}
}
}
}
The legendItemClick event returning false stops the legend from showing/hiding the series. You could get much more elaborate with the function if you wanted different behavior.
Of course, if you wanted the full behavior of the legend, you can build the chart with three actual series, rather than using two dummy series, and just supply the data as [x,y] pairs.
Fiddle:
http://jsfiddle.net/jlbriggs/3d3fuhbb/167/
Output:
You can links legend in group by linkedTo attribute in series, refer below code.
http://jsfiddle.net/jlbriggs/6gw5P/2/

Highcharts polar : series appear over others when toggle to visible

I'm using Highcharts to do a polar graph. When I load the page, some series aren't visible by default. The problem is when I want to show them, they appear above the others...
You can see it here : http://jsfiddle.net/kd2fs3rz/
The variable data is normaly load by Ajax when loading the page.
How can I do to have for exemple series 2 and 3 under serie 4 when I show them ?
You need to explicitly set the zIndex of each series:
var zIdx = 0; // Within the function, but outside of the while loop
chart.addSeries({
id: e.vag_id,
name: e.vag_id,
data: temp,
visible: visible,
zIndex: zIdx++ // Here
});
Updated Fiddle

Shield UI Legend Interactivity

I would like to know whether there is any interactivity in the chart legend of the Shield UI Charts? For instance can data series be hidden by using the legend? Are there any special properties to be set?
Yes. The chart legend items can be used to hide/show data series on the chart. However it is worth noticing, that if a series is not added to the legend it obviously cannot be hidden/shown from its list of items.
The legend's interactivity is also enhanced by the ability to additionally format its active/inactive elements:
legendItemSettings: {
disabledStyle: {
color: 'red'
}
}

Categories