Develop Reference

ApexChart JS Pie chart legend can't break column in right position

I need dynamic columns for legend labels in Pie chart, but if the legend position is right or left, this legend use scroll, how can i use scroll and more than one column.
**Now **
enter image description here
Need
enter image description here
I need this with scroll to.

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

Tooltip placement in amcharts stacked column graph

I am trying to make custom html tooltip in amcharts stacked column graph.
series.tooltipHTML = `
<h2>{name}</h2>
`;
However the tooltips on hovering, instead of coming at the position of the column always comes in the middle of the graph for every column. I have tried all the options like toolTipY given in the demos. How to make the tooltip's position correct that is on top or bottom of the respective column slices.
Codepen with problem

Drawing a horizontal line on a stacked bar chart on hover (chart js)

I have a stacked bar chart as follows:
I want to draw a horizontal line that goes through all the bars of a specific color on hover. Basically, if I hover on the following purple/mauve color, I want the following:
I looked alot in online as well as the documentation, but couldn't find anything.
Any help is really appreciated; thank you!

In theory you should be able to pre-render 5 line charts in addition to your stacked bar chart. Give each line chart a unique id or class html attribute, and each segment of a specific color needs a corresponding html classname, eg 'chartSegmentPurple' (actually it would be better to name the class based upon what the color represents, eg 'chartSegmentEconomicInequality'). Keep each line chart hidden. Give your chart an event listener for hover, then in the event handler get the classname. Use the classname to make visible the corresponding line chart.

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?