Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Format tooltip based on dataset index #369

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

mvdschee
Copy link

First of all, thank you for your work; I have not seen a chart looking this good out of the box, which such a small footprint.

Explanation About What Code Achieves:

This small change makes it possible to format the value from a dataset. this way I could have to datasets from different types to be displayed in the same chart (Example: Rank (#), Value ($))

let values = this.state.datasets.map((set, i) => {
  let value = set.values[index];
  return {
	title: set.name,
	value: value,
	yPos: set.yPositions[index],
	color: this.colors[i],
	formatted: formatY ? formatY(value, i) : value,  // extending the function with i as `index`
  };
});

Passing through the index from the mapping function, we can now format based on the index of the dataset, making it easy to have multiple formatting rules without breaking current implementations.

Screenshots/GIFs:

Screenshot 2021-12-17 at 11 07 43

Steps To Test:

Run yarn dev and open the index.html in docs.

or use the following formatTooltipY example

tooltipOptions: {
  formatTooltipY: (d, i) => {
    const suffix = (i === 0) ? ' #' :  ' $';
    return d + suffix;
  },
}
TODOs:
  • None

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