question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature request: option to define a y axis label formatter

See original GitHub issue

I’m creating a chart with values in the hundreds of thousands range. Currently the Y axis labels look like this:

300000
200000
100000

I’d love to be able to define a formatter so that I could, for example, group the numbers per thousands:

300,000
200,000
100,000

…or using short notation:

300K
200K
100K

Note that this is very similar to the tooltip formatters that are already supported — just that the formatter would be applied on the Y axis labels.

(Here’s the chart I’m talking about, in case it helps to understand my use case: https://mathiasbynens.github.io/covid-19-vaccinations-germany/)

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:2
  • Comments:6

github_iconTop GitHub Comments

2reactions
danielo515commented, Jan 28, 2022

Just shortenYAxisNumbers is not enough. An option to provide a formatter function is mandatory. The library only understands how to represent numbers, but there are some values that are better represented with strings for readabilty, for example big series 1k 20k, pixels 2k 4k 8k, milliseconds/seconds/minutes properly formatted 1hour 2hour 3hour or 1day 2day 1week etc. This library is tinny and awesome, but not being able to properly format the Y axis is a deal breaker

2reactions
scmmishracommented, May 7, 2021

There’s an axis option to shorten these.

Can be used as follows

const chart = new Chart("#app", {
  data: financialData,
  type: "line",
  axisOptions: {
    shortenYAxisNumbers: true,
  },
});
Read more comments on GitHub >

github_iconTop Results From Across the Web

Axis - Concepts - Handbook - Apache ECharts
ECharts provide the config axisLabel. You can change the setting according to the demand, such as the text alignment and the customized label...
Read more >
Axis customization in Flutter Cartesian Charts - Syncfusion
The labelStyle property in axis provides options to customize the font of axis label. The axis label can be customized using following properties,....
Read more >
Working with Charts — XlsxWriter Documentation
This section explains how to work with some of the options and features ... The Y axis is the value axis and points...
Read more >
Chart Domain (Category Axis) Defined Intervals and...
The Range (Y / Value) Axis of the charts have feature to define starting value, label formatting, and interval. Oftentimes, the Domain (X ......
Read more >
Tutorial on Labels & Index Labels in Chart - CanvasJS.com
Labels appears next to the dataPoint on axis Line. On Axis Y it is the Y value, and on X axis is either...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found