frappe / charts

Simple, responsive, modern SVG Charts with zero dependencies
https://frappe.io/charts
MIT License
14.9k stars 716 forks source link

Add index for tooltip label #379

Open pajohns opened 2 years ago

pajohns commented 2 years ago
Explanation About What Code Achieves:

I would like to have the ability to add custom data to tooltips. This will allow me to show more than just the label (the same as the X-axis) and add some more contextual information to the data point. For instance my graph shows data points displaying bank transactions on a certain date. I'd like to not only be able to display the date of transaction and the value. My suggested change is a simple change merely exposing the index when calling the customization of the label so I can refer to a matching list to pass additional data into it.

Screen Shot 2022-03-23 at 3 50 08 pm

Steps To Test:

When calling the formatTooltipX function, there should be a second parameter that will refer to the index of the dataset. To test, simply log this index to console.

<FrappeChart 
    data={data} 
    tooltipOptions={{
        formatTooltipX: (d, i) => {
            console.log('X Axis: ' + d);
            console.log('x axis index ' + i);
            return `<strong style="display: block; margin-bottom: 5px;">${d}</strong>${graphData[i].details}</strong>`;
        },
        formatTooltipY: d => {
            console.log('Y axis: ' + d)
            return audFormat.format(d);
        },
    }}

/>
TODOs:

It would be great if there was the ability to have this optional data as something that could be passed in whereby instead of a label being merely a string, it could be a string or an object. That way it could give choice as to how it's referred to when passed into the tooltip.