Skip to content

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