Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to set start value as "0" in chartjs?

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);
   }     
like image 513
Suganthan Raj Avatar asked Oct 13 '22 11:10

Suganthan Raj


People also ask

How do you start a zero in Chartjs?

To start the y-axis scale start from 0 you can use the beginAtZero property of Chart. js as shown in the below example. Here we have used beginAtZero: true property of Chart. js to set the minimum scale value to zero.

How do you start a bar graph at 0?

always start your axis at zero for bar (or column) charts: Simple. Set the axis start point to zero (Select axis, press Ctrl+1, and from Axis options set minimum to 0). So there you go.

Should bar charts start at zero?

If there's one thing almost everyone agrees on in data visualization, it's that bar charts should start at zero. Starting them anywhere else — truncating the y-axis — risks misleading your audience by making a small difference look like a big one.

How do you change the y-axis values in Chartjs?

js will automatically take value for y-axis based on your data, you can change y/x-axis setting under Options > Scales , I also needed to change step size of y-axis and get rid of x-axis grid line,"ticks" is something I was looking for, here is my sample code and steps to achieved all these.


1 Answers

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.

like image 408
xnakos Avatar answered Oct 16 '22 09:10

xnakos