163

here is my code. i need to set initial value as "0" in both x and y axis scales. I have tried latest version scales option.

graphOptions = {               
            ///Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines: false,    
            tooltipTitleTemplate: "<%= label%>",
            //String - Colour of the grid lines
            scaleGridLineColor: "rgba(0,0,0,.05)",
            //Number - Width of the grid lines
            scaleGridLineWidth: 1,
            //Boolean - Whether to show horizontal lines (except X axis)
            scaleShowHorizontalLines: true,
            //Boolean - Whether to show vertical lines (except Y axis)
            scaleShowVerticalLines: true,
            //Boolean - Whether the line is curved between points
            bezierCurve: true,
            //Number - Tension of the bezier curve between points
            bezierCurveTension: 0.4,
            //Boolean - Whether to show a dot for each point
            pointDot: true,
            //Number - Radius of each point dot in pixels
            pointDotRadius: 4,
            //Number - Pixel width of point dot stroke
            pointDotStrokeWidth: 1,               
            pointHitDetectionRadius: 20,               
            datasetStroke: true,
            datasetStrokeWidth: 2,
            datasetFill: true,               
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
        };
        var LineChart = new Chart(ctx).Line(graphData, graphOptions);
   }
Sebastian Bochan
  • 37,348
  • 3
  • 49
  • 75
Suganthan Raj
  • 2,330
  • 6
  • 31
  • 42

4 Answers4

416

For Chart.js 2.*, the option for the scale to begin at zero is listed under the configuration options of the linear scale. This is used for numerical data, which should most probably be the case for your y-axis. So, you need to use this:

options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

A sample line chart is also available here where the option is used for the y-axis. If your numerical data is on the x-axis, use xAxes instead of yAxes. Note that an array (and plural) is used for yAxes (or xAxes), because you may as well have multiple axes.

xnakos
  • 9,870
  • 6
  • 27
  • 33
  • @SuganthanRaj You are welcome! Just make sure that you consult the docs for Chart.js 2.0. A lot have changed from the 1.0 version and most examples online apply to the 1.0 version. ;) – xnakos Jun 21 '16 at 09:33
  • @SuganthanRaj For instance, the `scaleShowVerticalLines` is not valid for 2.0. Or the tooltip template. Options, in general, follow a hierarchical approach in 2.0. – xnakos Jun 21 '16 at 09:40
  • This answer is outdated, the Wouter Debie's answer bellow works for me. – Bruno Aquino Mar 08 '23 at 10:29
66

It's now (5 years later and version 3.x) a bit different

options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }

see: https://www.chartjs.org/docs/latest/#creating-a-chart

Wouter Debie
  • 926
  • 1
  • 7
  • 10
11

If you need use it as a default configuration, just place min: 0 inside the node defaults.scale.ticks, as follows:

defaults: {
  global: {...},
  scale: {
    ...
    ticks: { min: 0 },
  }
},

Reference: https://www.chartjs.org/docs/latest/axes/

tuliomarchetto
  • 549
  • 1
  • 5
  • 14
5

Please add this option:

//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero : true,

(Reference: Chart.js)

N.B: The original solution I posted was for Highcharts, if you are not using Highcharts then please remove the tag to avoid confusion

wmash
  • 4,032
  • 3
  • 31
  • 69