0

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.

Michael Nusair
  • 11
  • 1

1 Answers1

0

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}
],
);
Anna
  • 33
  • 5
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 25 '22 at 09:27