How to set max and min value for Y axis

后端未结

关注

 17  2038

既然无缘

I am using line chart from http://www.chartjs.org/ $\"enter$

As you can see max value (1

相关标签:

17条回答

慢半拍i

2020-11-27 11:26

var config = {
            type: 'line',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [{
                        label: "My First dataset",
                        data: [10, 80, 56, 60, 6, 45, 15],
                        fill: false,
                        backgroundColor: "#eebcde ",
                        borderColor: "#eebcde",
                        borderCapStyle: 'butt',
                        borderDash: [5, 5],
                    }]
            },
            options: {
                responsive: true,
                legend: {
                    position: 'bottom',
                },
                hover: {
                    mode: 'label'
                },
                scales: {
                    xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Month'
                            }
                        }],
                    yAxes: [{
                            display: true,
                            ticks: {
                                beginAtZero: true,
                                steps: 10,
                                stepValue: 5,
                                max: 100
                            }
                        }]
                },
                title: {
                    display: true,
                    text: 'Chart.js Line Chart - Legend'
                }
            }
        };

        var ctx = document.getElementById("canvas").getContext("2d");
       new Chart(ctx, config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <canvas id="canvas"></canvas>
</body>

0 讨论(0)

逝去的感伤

2020-11-27 11:27

Writing this in 2016 while Chart js 2.3.0 is the latest one. Here is how one can change it

var options = {
    scales: {
        yAxes: [{
            display: true,
            stacked: true,
            ticks: {
                min: 0, // minimum value
                max: 10 // maximum value
            }
        }]
    }
};

0 讨论(0)

无人及你

2020-11-27 11:28
With 1.1.1, I used the following to fix the scale between 0.0 and 1.0:
```
var options = {
    scaleOverride: true,
    scaleStartValue: 0,
    scaleSteps: 10,
    scaleStepWidth: 0.1
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
感动是毒

2020-11-27 11:30
Just set the value for scaleStartValue in your options.
```
var options = {
   // ....
   scaleStartValue: 0,
}
```
See the documentation for this here.
0 讨论(0)
发布评论:

提交评论
- 加载中...

醉话见心

2020-11-27 11:31

This is for Charts.js 2.0:

The reason some of these are not working is because you should declare your options when you create your chart like so:

$(function () {
    var ctxLine = document.getElementById("myLineChart");
    var myLineChart = new Chart(ctxLine, {
        type: 'line',
        data: dataLine,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                        beginAtZero: true
                    }
                }]
            }
        }

    });
})

Documentation for this is here: http://www.chartjs.org/docs/#scales

0 讨论(0)

忘掉有多难

2020-11-27 11:34

In my case, I used a callback in yaxis ticks, my values are in percent and when it reaches 100% it doesn't show the dot, I used this :

      yAxes: [{
                   ticks: {
                       beginAtZero: true,
                       steps: 10,
                       stepValue: 5,
                       min: 0,
                       max: 100.1,
                       callback: function(value, index, values) {
                           if (value !== 100.1) {
                               return values[index]
                           }
                       }
                   }
               }],

And it worked well.

0 讨论(0)