[charts] Separate tick labels vs data labels for bar charts

[eddiew]

Summary

I'm using a bar chart as a histogram, and would like to label the histogram buckets separately from the tick labels, which ideally would represent the boundaries between buckets.

Examples

In this example, I'd like the tooltip header to read Apr 15 - Apr 22, rather than just Apr 15

Motivation

No response

Search keywords: bar chart, tick label, histogram

[michelengelen]

Hey @eddiew ... this is already possible with a custom valueFormatter on the axis prop. Check out this section in the docs: axis formatter.

If you could provide a live code example from your specific implementation that would be great!

[eddiew]

Ah, that answers my question. I hadn't thought of using the valueFormatter fn to look up the tick label from my data set separately, and it didn't occur to me to look at the tooltip docs for this.

One suggestion if possible - if a dataset is passed, it would be nice if the valueFormatter fn could take the entire data point as an argument, rather than just the label provided by dataKey. On second thought, it might even be simpler just to add an option like tickLabelKey for use with the dataset option - that way the valueFormatter fn can be bypassed entirely.

But otherwise feel free to close this, the solution provided works.

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@eddiew: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[michelengelen]

You're welcome! If you have any other questions or need further assistance, feel free to ask.