How can configure my y-axis on chart.js?

问题

I am trying to build graph.

My y-axis start with 0 here, I dont know how to configure it and why it is talking 0 - I see other post which mentioned scaleOverride:true, scaleStartValue:0.1, scaleStepWidth:5 - I dont know how to use that in my below code , how can configure y-axis in chart.js.

Any pointer would be

I have following code

var barChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: 'Dataset 1',
        backgroundColor: "rgba(220,220,220,0.5)",
        data: [6, 6, 6, 8, 6, 9, 8]
    }]
};
function barChart() {
    var context = document.getElementById('stacked').getContext('2d');
    var myBar = new Chart(context, {
        type: 'bar',
        data: barChartData,
        options: {
            title:{
                display:true,
                text:"Chart.js Bar Chart - Stacked"
            },
            tooltips: {
                mode: 'label'
            },
            responsive: true,
            scales: {
                xAxes: [{
                    stacked: true,
                }],
                yAxes: [{
                    stacked: true
                }]
            }
        }
    });
};
$(document).ready(function() {
    $(document).ready(barChart);
});

回答1:

Thank you guys for helping, I observed that chart.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.

Step 1) Canvas this is place holder where your chart will display on JSP

<canvas width="1393px;" height="500px;" id="stacked"></canvas>

Step 2) Create sample datasets (this is JSON you need to create based on your requirement but make sure you provide exact the same formated JSON response as given below along with your data.

var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
    label: 'Dataset 1',
    backgroundColor: "red",
    data: [9, 6, 6, 8, 6, 9, 8]
},
{
    label: 'Dataset 1',
        backgroundColor: "rgba(225,226,228,0.5)",
        data: [9, 6, 6, 8, 6, 9, 8]
    }]
};

or you can call JSON from controller inside script as below

var jsonArry = <%=request.getAttribute("jsonArry")%>;

Step 3) call that JSON which you have created at step 2

  function barChart(){
          var context = document.getElementById('stacked').getContext('2d');
          var myBar = new Chart(context, {
          type: 'bar',
          data: jsonArry,

  options: {
         tooltips: {
          mode: 'label'
      },
      responsive: true,
      scales: {
          xAxes: [{
              ticks:{
                  stepSize : 10,

              },
              stacked: true,
            gridLines: {
                    lineWidth: 0,
                    color: "rgba(255,255,255,0)"
                }
          }],
          yAxes: [{

              stacked: true,
               ticks: {
                  min: 0,
                  stepSize: 1,
              }

          }]
      }
      }
  });

};

Hope this will help , for reference I have used following documentation Chart JS

Thanks.

回答2:

Just remove the stacked option and it will stop starting from 0 (unless your data starts from 0).

Related fiddle - http://jsfiddle.net/rsyk9he0/

For stacked charts, Chart.js builds a list of positive and negative sums for each stack (bar) and then uses that to figure out the scale min and max values. If there are no negative values, the list of negative sums is a list of 0s. This forces the scale min to be 0.

scaleStartValue, scaleStepWidth, etc. are options from v1.x of Chart.js. You are using v2.x. See How to make integer scale in Chartjs for the 2.x equivalents.

来源：https://stackoverflow.com/questions/37286574/how-can-configure-my-y-axis-on-chart-js

标签

charts

chart.js