Skip to content

Conversation

pajohns
Copy link

@pajohns pajohns commented Mar 23, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant