CODEWITHSUNDEEP
reactjsreact-charts
Michael Nusair
Michael Nusair

Reputation: 11

Why "min" and "max" properties doesn't effect react-charts vertical axis?

I'm trying to plot a line chart using the "react-charts" repository in a ReactJs app. Unfortunately I couldn't find documentation for this repository, but only examples. I understand it is based on ChartJs and I took an example and added the "min" and "max" properties but it doesn't work. my TestC.js file :

import React from 'react'
import { Chart } from 'react-charts'

export default function TestC() {
    
    const data = React.useMemo(
        () => [
          {
            label: 'Series 1',
            data: [["2018", 6], ["2019", 7], ["2020", 8], ["2021", 6], ["2022", 6]]
          },
        ],
        []
      );
     
    const axes = React
    .useMemo(
    () => [
        { primary: true, type: 'ordinal', position: 'bottom' },
        { type: 'linear', position: 'left', min: 4, max: 10}
    ],
    []
    );
     

    return (
        <div
            style={{
            width: '400px',
            height: '300px'
            }}
        >
            <Chart data={data} axes={axes} />
        </div>
    )
}

And the result is:

Result

The axis starts from 6 and ends with 8, according to the range of the DATA and not according to the "min" and "max" properties.

Upvotes: 0

Views: 104

Answers (1)

Anna
Anna

Reputation: 23

Try with base:4 to set the minim value, for the max I am still investigating

const axes = React
.useMemo(
() => [
    { primary: true, type: 'ordinal', position: 'bottom' },
    { type: 'linear', position: 'left', base: 4}
],
);

Upvotes: 0

Related Questions