react-native-charts-wrapper icon indicating copy to clipboard operation
react-native-charts-wrapper copied to clipboard

Customizing y axis labels

Open pavanural opened this issue 5 years ago • 10 comments

How to customise y axis? Is there any customisable methods or something equivalent? More required feature for me to implement in one of the project? Could you please give the solution soon?

pavanural avatar Apr 30 '19 06:04 pavanural

Exactly what you want to customize? Actually we can customize granularity, textColor, texSize, and others, for each yAxis (left & right)

YisusMB avatar Apr 30 '19 17:04 YisusMB

For example,

I have a y-axis like [0, 1000, 3000, 6400, 9300, 12350]. If I want to print this number it will work fine. But If I have to convert this number to the format like [0, 1k, 3k, 6k, 9k, 12k]. It is not possible.

I am not able to pass the array of string to y-axis like x-axis also.

I want to customise y-axis label while printing.

How can I achieve this. Please help to write customise method for this?

pavanural avatar May 01 '19 12:05 pavanural

Check

 valueFormatter: PropTypes.oneOfType([
    PropTypes.oneOf(['largeValue', 'percent', 'date']),
    PropTypes.string,
    PropTypes.arrayOf(PropTypes.string)
  ]),

try largeValue

wuxudong avatar May 01 '19 13:05 wuxudong

Yes I have tried it. But it is not working properly. For 1999, it will print 1.99k and for 0.5 it will print 0EEE.

I want only one decimal after dot(.), For example: 1999 should print 1.9k and 0.5 should be same. How can I achieve that?

pavanural avatar May 02 '19 05:05 pavanural

Additional to @pavanural comment, sometimes we need other conversions. for example, let say [0, 1000, 3000, 6400, 9300, 12350] are the size of some files and we need to show them with MB or GB suffix. so if it's supported by native libraries, actually we need a function like this:

formatter: function(): string {
  // conversion logic and return a string to use as y-axis label
}

something similar to highchart's formatter option

SaeedZhiany avatar Jan 10 '20 11:01 SaeedZhiany

How are you dealing with this? All I want is to add a space between the yLabel value and the chart...

tayloraleach avatar Jan 29 '21 18:01 tayloraleach

It would be very helpful if we can set custom value formatter like formatter: function(value: number): string { // conversion logic and return a string to use as y-axis label }

Native MPAndroidChart supports custom ValueFormatter too.

jschenkDD avatar Apr 26 '22 05:04 jschenkDD

I am able to set prefix/suffix using valueFormatter using # as a number/value in y axis.

valueFormatter: "# bu" // 10000 bu, 20000 bu, 30000 bu
valueFormatter: "$#" // $200, $300, $400, $500

is there anyway I can format values? e.g. I want to format number by comma. 10,000 bu, 20,000 bu, 30,000 bu

maheshcheliya avatar Jun 15 '22 03:06 maheshcheliya

#,### bu?

wuxudong avatar Jun 17 '22 09:06 wuxudong

valueFormatter 什么时候能支持函数

ywanhzy avatar Sep 15 '23 03:09 ywanhzy