How can I hide series from a HighCharts legend? - javascript

I have 4 series in my chart. 2 are visible when the chart loads. 2 are hidden.
When the user zooms in, the visibility switches.
How can I have a legend that only displays the 2 visible series?

Pass showInLegend parameter to series you don't want to be visible in legend like:
series.showInLegend = false;

Related

How to disable auto hiding of labels on Category Axis in Amchar 4?

In amCharts 4 column chart, labels on category axis are alternately hidden when user reduces the browser width.
By default the chart automatically hides labels to improve readability. I want to disable it.
Please refer ruining ex. codepen.io/Mishra-Praveen/pen/MWwmVbp
I am getting solution for Amchart 3 not for Amchart4.
categoryAxis.renderer.minGridDistance = 30;
Increasing these numbers will mean likely sparser grid lines and related labels. Decreasing will probably result in denser grid/labels.

I have 2 series of data in a Highchart and I only need to show one of them while ensuring that both series labels and values show in the tooltip

Is it possible to have 2 series of data in one graph where one is shown and the other is hidden, while having both series labels and values show in the tooltip?

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/

Highchart Absolute Percentage Stacked Area

I have 10 series in one chart and using the Percentage Stacked Area chart type in Highchart, I can get the percentage distribution for each series.
However, when I deselect one series from the legend, it recalculate the percentage by only the active series. How do I tell Highchart to use the original total series instead of the active ones only?
You can set chart.ignoreHiddenSeries to false, see: http://jsfiddle.net/quthyjta/
API: http://api.highcharts.com/highcharts#chart.ignoreHiddenSeries

HighCharts - how to show the lineborder in Area Charts

I have a chart with two series - area types,When series1 data is less than another series2 , then only the border line of the series1 must appear over the series2 data.
In high charts, do we have any attributes or method to show only the line border.
You have two options:
1) arrange your series so that the one that will get hidden is on top
2) set your fillColor using rgba() values so that you can set the opacity lower, or set your fillOpacity lower, so that you can see both series no matter which one is on top.
http://api.highcharts.com/highcharts#plotOptions.area.fillColor
http://api.highcharts.com/highcharts#plotOptions.area.fillOpacity

Categories