elastic
How can I sort the tooltip and legend by values for line series chart?
hi, I want to know, how can I sort the tooltip and legend by their values for line series chart.
example code: https://bolt.new/~/sb1-cgcnmq
case 1:
when hover to the line, I want to make the tooltip sorted by their values from high to low.
for example, the following chart, the expected result should be "Month2 104" -> "Month1 76" -> "Month3 71"
case 2: for legend, I want to show the legend sorted by their values from high to low ( or from low to high if possible).
The example in grafana, you can control rank from high to low, or from low to high:
another example from elastic chart story book:
https://elastic.github.io/elastic-charts/storybook/?path=/story/line-chart--multiple-with-axis-and-legend&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-default%20sort=true&knob-enable%20legend%20size=true&knob-legend%20size=200&knob-position=right&knob-reverse=true
The only doc about sort legend is here: https://elastic.github.io/elastic-charts/storybook/?path=/story/legend--sort-items&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-default%20sort=true&knob-enable%20legend%20size=true&knob-legend%20size=200&knob-position=right&knob-reverse=true
But I don't know how to make it work for line series chart. I tried some ways but it totally doesn't work.
Sorry for the delay, currently there does not seem to be an easy way to sort either the legend or tooltip items by value. This is because the sorting functions for both only include context of the series not the x bucket the cursor is over.
{
key: "groupId{__global__}spec{month_2}yAccessor{y}splitAccessors{}"
seriesKeys: ['y'],
specId: "month_2",
splitAccessors: Map(0) {},
xAccessor: "x",
yAccessor: "y",
}
There may be another way to achieve this using the custom tooltip, let me check on that.
Yeah you can do this for the tooltip using the Tooltip.body prop. The tooltip allows composing all parts of the tooltip and we export internally used components like TooltipTable to allow easy replacement of parts like the body. This body prop exposes more context including the x and y values of the current tooltip, not included in the Tooltip.sort prop.
This solution still is not great because it requires manually defining the properties of TooltipTable that are computed internally, which we do not expose the the body. Because of this you will loose features like pinning if you do not implement them yourself. You can see a working demo here.
This is not possible with the legend as it is not composable like the tooltip, you would need to rebuild the whole legend and pass as a customLegend.
That said, this is not ideal and I suggest opening an issue to add value to the sorting context for both legends and tooltips.