How to set lower and upper bound in react react-chartjs-2?

Question

The code displays a bar chart of the number of sales of a day from the database in the current week. The problem I face is that the lower and upper bound is set to the lowest and the highest value of sales per day respectively. Is there a way to make lower bound to 0 and upper bound to max data + 4?

ReactJs

import React, {useEffect,useState} from 'react'
import {Bar} from 'react-chartjs-2';
import moment from "moment";
import Axios from "axios";


export default function Chart() {
    const [chartvalues,setchartvalues]=useState([])
    var day1,day2,day3,day4,day5,day6,day7,dispday1,dispday7
    const today = moment();
    day1 =moment().day(0).format("dddd").toString();
    day2  = moment().day(1).format("dddd").toString();
    day3  = moment().day(2).format("dddd").toString();
    day4  = moment().day(3).format("dddd").toString();
    day5  = moment().day(4).format("dddd").toString();
    day6  = moment().day(5).format("dddd").toString();
    day7 = moment().day(6).format("dddd").toString();
    
    dispday1 = today.startOf('week').format("DD-MM-YYYY").toString();
    dispday7 = today.endOf('week').format("DD-MM-YYYY").toString();

    var disp1day1 = moment().day(0).format("YYYY-MM-DD").toString();
    var dispday2  = moment().day(1).format("YYYY-MM-DD").toString();
    var dispday3  = moment().day(2).format("YYYY-MM-DD").toString();
    var dispday4  = moment().day(3).format("YYYY-MM-DD").toString();
    var dispday5  = moment().day(4).format("YYYY-MM-DD").toString();
    var dispday6  = moment().day(5).format("YYYY-MM-DD").toString();
    var disp1day7 = moment().day(6).format("YYYY-MM-DD").toString();
    useEffect(() => {
        Axios.post('http://localhost:3001/getdate', {
            day1 : disp1day1,
            day2  : dispday2,
            day3  : dispday3,
            day4  : dispday4,
            day5  : dispday5,
            day6  : dispday6,
            day7 : disp1day7,
        }).then(() => {
           console.log("dates sent!")
           Axios.get('http://localhost:3001/getchartdata').then((response) => {
           setchartvalues(response.data)
           console.log("chartvalues",response.data)

          })
        });
    })
    

    const chartData ={labels: [day1,day2 ,day3 ,day4 ,day5 ,day6 ,day7 ],
    datasets: [
        {
            label: "Daily Sales",
            data: 
                chartvalues.map((number)=>{   
                    return number.NoIt
                },)
            ,
            backgroundColor: [
                'rgba(255, 99, 132, 0.6)',
                'rgba(54, 162, 235, 0.6)',
                'rgba(255, 206, 86, 0.6)',
                'rgba(75, 192, 192, 0.6)',
                'rgba(153, 102, 255, 0.6)',
                'rgba(255, 159, 64, 0.6)',
                'rgba(255, 100, 64, 0.6)',
            ]
        }
    ]
    
}
    return (
        <div>
            <h1>Sales from {dispday1} to {dispday7} </h1>
             <Bar
                    data={chartData}
                    options={{
                        
                    }}
                />
        </div>
    )
}

Thanks for the help!

Please add a minimal reproducible example!

0stone0
– 0stone0

2021-03-15 19:57:12 +00:00
Commented Mar 15, 2021 at 19:57 — 0stone0
– 0stone0, Commented Mar 15, 2021 at 19:57

LeeLenalee · Accepted Answer · 2021-03-15 23:36:44Z

You can make use of the suggestedMax property, in the example I setted the stepSize to 1, in case you wont do this it will round it to the next available stepsize to keep the scale scaling in tact.

To start at zero you can set the beginAtZero prop in the tick config to true

const data = [12, 19, 3, 5, 2, 3];
const maxDataEntry = Math.max(...data);

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data,
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false,
          suggestedMax: maxDataEntry + 4,
          stepSize: 1,
          beginAtZero: true
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

Collectives™ on Stack Overflow

How to set lower and upper bound in react react-chartjs-2?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related