Apexcharts.js: Feature Request : Values in legend

[arkhenstone]

With a lot of series, it sometimes become difficult to see values in tooltip. The best I could achieve with the tooltip was to CSS tooltip classes into block positionned below the chart. It works nice, but it's kind of hacky.
Here's how it renders :

As such, it almost looks like a legend, but you loose the interactivity to show or not a serie.

Just a property to show values in legend would be nice.

[junedchhipa]

Another good suggestion!

I personally think the same way that in a multiple series chart - tooltip takes a lot of space and becomes a hindrance in viewing the chart correctly.
So, showing value directly in a legend is not a bad idea for those charts.

I will think about it, thanks.

[junedchhipa]

And also, in case of legends, you will not require the DateTime label as you already show DateTime in x-axis tooltip which is more elegant and easy on eyes

[junedchhipa]

Just a thought.
I have already tweaked something similar to it by tooltip.fixed option and making some CSS adjustments on this page https://apexcharts.com/features/ (performance chart).

The reason I am re-thinking about providing values in the legend is the Legend is drawn by SVG elements and difficult to re-draw the positions/width once it is drawn. While the tooltip is HTML, and very flexible when it comes to tweaking designs.

In tooltip, we also have an option to hide DateTime by options.tooltip.x.show = false. Combine with tooltip.fixed, make the option to always show tooltip by

.apexcharts-tooltip { opacity: 1 }

and you are already there..

[arkhenstone]

Yes I know that the fact legends are SVGs makes it difficult to manage, since it would overflow the SVG easily, and would lead to tons of bug. Better turns the legends HTML in this case. But as long the tooltip is easily hackable, it's not that much a priority.

[junedchhipa]

Closing as the legend is drawn with HTML now.

[amitsarangi]

The above solution partially works as there's no tooltip when the chart is loaded. So it would require user interaction (hovering on the chart) for the "legend" to appear here. Example - https://codepen.io/anon/pen/YbrGYO . What can I tweak to show the tooltip without any interaction, and it should show the last value in the data series?

[junedchhipa]

Added a new property legend.tooltipHoverFormatter which provides a seriesIndex and dataPointIndex in the parameters.

Use it like this

legend: {
  tooltipHoverFormatter: function(seriesName, opts) {
    return seriesName + ' - <strong>' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + '</strong>'
  }
}