Show only min and max in yAxis

[zRelux]

Is it possible to achieve something like this?
Also can you label the base?

[Abhinandan-Kushwaha]

Yes @zRelux
To label the the base (X-axis), you need add the property label in the objects of the data array.

To show Y-axis labels only at specific positions, we can use the yAxisLabelTexts prop. Since, the Y-axis is at right side, it would be safer to manually specify the width of the chart using the width prop. See the doc about yAxisSide

Here is an example-

const data = [
  {value: 67, label: '24/11'},
  {value: 67.8, label: '25/11'},
  {value: 69.3, label: '26/11'},
  {value: 68.3, label: '27/11'},
  {value: 68.8, label: '28/11'},
  {value: 68.3, label: '29/11'},
  {value: 71, label: '30/11'},
];
const yAxisLabelTexts = [
  'kg', // at origin, it will show kg
  ' ',
  '67',
  ' ',
  ' ',
  ' ',
  ' ',
  ' ',
  ' ',
  '71',
  ' ',
];

return (
  <LineChart
    data={data}
    hideDataPoints
    color="red"
    thickness={5}
    hideRules
    yAxisSide={yAxisSides.RIGHT}
    xAxisColor={'lightgray'}
    yAxisThickness={0}
    width={336}
    yAxisOffset={66}
    showFractionalValues // since range of values is small (between 67 - 71)
    yAxisLabelTexts={yAxisLabelTexts}
    yAxisTextStyle={{fontWeight: 'bold', color: 'black'}}
  />
);

Output-

[zRelux]

Oh awesome thanks for the response!

[zRelux]

Update on this how do I make sure the right side values match the one in the data array? For example the 67 is supposed to match with the lowest value and 71 with the height but the graph may look different

[Abhinandan-Kushwaha]

Hi @zRelux
The y-axis is divided into n number of sections which can be set using the noOfSections prop. By default noOfSections is 10. The value of each section is set using stepValue prop.

You need to adjust the noOfSections and stepValue such that the lowest value is 67 and the highest value is 71.

For your use case, you can set-

stepValue={1}
noOfSections={5}

After this the chart is rendered like this-

The complete code is-

const data = [
  {value: 67, label: '24/11'},
  {value: 67.8, label: '25/11'},
  {value: 69.3, label: '26/11'},
  {value: 68.3, label: '27/11'},
  {value: 68.8, label: '28/11'},
  {value: 68.3, label: '29/11'},
  {value: 71, label: '30/11'},
];
const yAxisLabelTexts = [
  'kg', // at origin, it will show kg
  '67',
  ' ',
  ' ',
  ' ',
  '71',
];

return (
  <LineChart
    data={data}
    hideDataPoints
    color="red"
    thickness={5}
    // hideRules                  // uncomment this to hide the rules
    yAxisSide={yAxisSides.RIGHT}
    xAxisColor={'lightgray'}
    yAxisThickness={0}
    width={336}
    yAxisOffset={66}
    stepValue={1}
    noOfSections={5}
    showFractionalValues // since range of values is small (between 67 - 71)
    yAxisLabelTexts={yAxisLabelTexts}
    yAxisTextStyle={{fontWeight: 'bold', color: 'black'}}
  />
);