Develop Reference

How do I export the current styling of a HighChart series chart to PNG, JPG or PDF?

I am developing a series chart of efficiencies (in percentage) over time.
I have specific requirements for the legend:
Clicking on a legend item leaves the series on the chart but fades the line, markers and legend item so that they appear as ‘inactive’
Clicking on an ‘inactive’ legend item undoes the fade, so the line, markers and legend item appear as ‘active’
Add checkboxes for each legend item – deselecting and selecting a checkbox have the same effect as clicking on the associated legend item
Group series by a category header (in the fiddle that is the ‘Chrystalline Si Cells’) – clicking on this header or it’s associated checkbox makes the entire series group ‘active’ or ‘inactive’
All of this is working in a fiddle - https://jsfiddle.net/slaws/0wjpcaqt/138/ - which uses styledMode and a custom legend and dynamically sets the opacity of the chart and custom legend elements:
$('.highcharts-legend-item.highcharts-series-' + value).css('opacity', new_opacity);
$('.highcharts-series.highcharts-series-' + value).css('opacity', new_opacity);
$('.highcharts-markers.highcharts-series-' + value).css('opacity', new_opacity);
However I am struggling with one more key requirement, which is to export the current state of the chart to an image or PDF, with all of series exported with their current 'active' or 'inactive' state. So, if a series is faded, it should be exported as faded to the image or PDF.
Here are screenshots to illustrate:
This is the display of chart in the browser with the Multichrystalline series inactive
This is how that chart is exported to PNG - I want the Multichrystalline series to be exported to look like it did in the browser, with it's line, markers and legend item faded to make it appear ‘inactive’
Any suggestions how I export the chart with it’s styling currently in effect?
PS The legend in the fiddle may start off misaligned, but rerunning it corrects that.

You should not use the CSS to achieve it, but do a series update to keep those changes in the chart config.
events: {
checkboxClick() {
this.update({
opacity: 0.5
})
}
},
Take a look at this approach: https://jsfiddle.net/BlackLabel/b4n0z5k8/
API: https://api.highcharts.com/class-reference/Highcharts.Series#update

Amcharts 4 : Disable single legend item programmatically

I just need to know how to disable a single legend item programmatically on chart reload (disable means: legend is shown greyed out and its linked curve is hidden), as I need to reload a chart with some new data using some back and forward arrows, but still need to remember the user preference or the state of legend items (on/off)

You can just call hide on the series associated with that legend marker to hide the series/grey out the marker:
series.hide();

Thanks #xorspark that's really it, it's about controlling the series not legend.
It happened to work specifically with the appeared or inited events, not shown event as it seemed to be, like this:
series.events.on("inited", () => {
reactState ? series.show() : series.hide();
});
inited event even works better, as disabled legends will not show a glimpse of their color on the curve when using appeared.

How to make Highcharts to use all the colours when replotting? (it is repeating colours unnecessarily)

I am rendering a chart using Highcharts.js library
$('#container').highcharts({
title: {
...
I have some checkboxes to select which series to plot. Depending which series I plot the first time, the colors will be different.
How to reproduce
Go to the example: http://jsfiddle.net/1u98o3aq/1/
Select only "Tokyo" checkbox, click plot
Select "New york" checkbox, click plot
Select "Berlin" checkbox, click plot
...
As you can see, it is not using all the colors, all of them are plotted in blue.
You can now unselect everything, plot. Then select everything, plot. The 4 series will remain all with the same color.
However, if you start (Run) the example again, and this time select everything and plot, now it is rendered correctly. Now you can unselect everything and go one by one. The colors are right.
If you select now only the 2nd and the 3rd series, the 2nd and 3rd colors will be used (no blue).
It is like Higcharts is caching for each series a color (which should not) and chosing wrongly (starting from color 0) when adding more series to be shown.
Using custom colors does not solve the problem.

I think that your problem is connected with how you are loading your series to your chart.
Right now, when you are loading the new chart, you are basing into previously drawn series (you are updating the series array).
To avoid the problem you have, you should be able to make copy of your array before you will load it into your chart:
lastSeries = $.extend(true, [], seriesSelection);
Here you can see an example how it can work: http://jsfiddle.net/1u98o3aq/3/

Highcharts column chart "re-draw"

Please consider the following fiddle: http://jsfiddle.net/Lmbw75mg/4/
As you can see, there are 3 data points. You are able to hide/show the series by clicking on the corresponding legend item. When you click on dog or bird the chart nicely reacts, and redraws; removing the x-axis label and only displaying 2 columns.
Why doesn't this happen when I click on fish? How can I achieve this effect?

Chart.js ungroup data in tooltip with multiple lines

I'm looking for an answer similar to a previous question:
Link: chart js tooltip how to control the data that show
But I need a solution for a Line Chart via Chart.js. I'm wanting a line chart with multiple lines and I would like each point to return only the data for that point in the tooltip. By default the tooltip returns data in a group for each point at the index you hover over. So I would want each point to only return it's data and have it's own tooltip box.
See default example of line chart : http://www.chartjs.org/docs/#line-chart
It would also be nice if I could have all the tooltips displayed by default and not triggered by a mouse hover.