1

I have implemented a react-chart using the help of the following doc

http://www.chartjs.org/docs/latest/charts/line.html

I have implemented it successfully but this doc not show how to set a maximum value for the y axis. I want to set the max y axis for 100. But because my dataset does not exceed any value over 19, the max y axis is set at 20.

How can i set the max y axis value for 100 even though my data does not exceed 19.?

My code

class LineCharts extends Component {

    constructor() {
        super();

    }

    render() {

        var chartData = {

            labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            datasets: [
                {
                    color: "#4D5360",
                    highlight: "#616774",
                    borderColor: "rgba(179,181,198,1)",
                    pointBackgroundColor: "rgba(179,181,198,1)",
                    pointBorderColor: "#fff",
                    pointHoverBackgroundColor: "#fff",
                    pointHoverBorderColor: "rgba(179,181,198,1)",
                    label: 'Current lag',
                    fill: true,
                    lineTension: 0.1,
                    fillColor: "rgba(151,187,205,0.2)",
                    strokeColor: "rgba(151,187,205,1)",
                    pointColor: "rgba(151,187,205,1)",
                    pointStrokeColor: "#fff",
                    scaleOverride: true,
                    scaleStartValue: 0,
                    scaleStepWidth: 1,
                    scaleSteps: 5,
                    data: [12, 19, 3, 5, 2, 3, 4, 7, 9, 3, 12, 19],
                },


            ],

        }

        var chartOptions = {
            showScale: true,
            pointDot: true,
            showLines: false,

            title: {
                display: true,
                text: 'Chart.js Bar Chart'
            },

            legend: {
                display: true,
                labels: {
                    boxWidth: 50,
                    fontSize: 10,
                    fontColor: '#bbb',
                    padding: 5,
                }
            },

        }

        return (

            <LineChart data={chartData} options={chartOptions} width="600" height="250"/>

        );
    }
}
export default LineCharts;
CraZyDroiD
  • 6,622
  • 30
  • 95
  • 182

1 Answers1

8

You can try this:

var chartOptions = {
    showScale: true,
    pointDot: true,
    showLines: false,

    title: {
        display: true,
        text: 'Chart.js Bar Chart'
    },

    legend: {
        display: true,
        labels: {
            boxWidth: 50,
            fontSize: 10,
            fontColor: '#bbb',
            padding: 5,
        }
    },

    scales: {
      yAxes: [{
          ticks: {
              beginAtZero:true,
              min: 0,
              max: 100    
          }
        }]
     }
}

Docs

kurumkan
  • 2,635
  • 3
  • 31
  • 55
  • This is if the `react-chartjs` package he is using is using `chart.js` v2. – Dan Mason Aug 21 '17 at 09:54
  • I'm using 0.8.0 – CraZyDroiD Aug 21 '17 at 09:56
  • @CraZyDroiD There is a branch on `react-chartjs` which comes with `chart.js` v2 https://github.com/reactjs/react-chartjs/tree/chartjs-v2 maybe its worth using that. Unfortunately I cannot find any docs on v1 and you already appear to have the options in this answer: https://stackoverflow.com/a/28991320/2079735 – Dan Mason Aug 21 '17 at 10:08