Chartjs更改水平轴值

Question

What options to set in Chartjs to change the horizontal axis value, from the code below to have a base value of 100, instead of 0.

Chart to look like this, but y-axis base should be a 100 and not 0 as shown in the graph here.

So, if a value of 70 is plotted on the bar chart, then it's y-axis should start at 100 to 70. While a value of 120, should start at 100 to 120 on it's y-axis.

Mock up, Excel version of how it should look like.

I have tried some answers here but, unable to achieve this in Chartjs.

Note: I am working of the sample code from chartjs website. However, still can't get the specific scaling as needed.

Chartjs 2.6.0

var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var color = Chart.helpers.color;
    var barChartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: 'Dataset 1',
            backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
            borderColor: window.chartColors.red,
            borderWidth: 1,
            data: [140,10,60,69,56,110]

        }, {
            label: 'Dataset 2',
            backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
            borderColor: window.chartColors.blue,
            borderWidth: 1,
            data: [50,120,70,98,130,34]
        }]

    };

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Chart.js Bar Chart'
                }
            }
        });

    };

Edited Removed Random numbers, and edited constants for testing purposes. I am currently looking into pluggins for Chartjs. This option might not be available in distributed package.

Answer 1

Just add

ticks: {           
    min:100
}

in your options under the y-axis scales your option should look like this.

options: {
    scales: {
        yAxes:[{
            ticks: {
                min:10
            }
        }],
    },
    responsive: true,
    legend: {
        position: 'top',
    },
    title: {
        display: true,
        text: 'Chart.js Bar Chart'
    }
}

Ps: check the indentation because i was not using the editor.

Edit May be you have stacked in this case removed the stack type. See this fiddle

Answer 2

Workaround Answer based of @adeel suggestions:

So from the fiddle below, I used stacking on both y and x-axis, to get the desired effect. The first dataset (just an offset dataset) is used as the basis to stack the second dataset (actual) to get the desired effect.

fiddle

var ctx = document.getElementById("myChart").getContext("2d");
var data = {
  labels: ["January", "February", "March", "April", "May", "June"],
  datasets: [{
    label: "Offset",
    backgroundColor: "transparent",
    data: [50,100,70,60,100,100]
  },{
    label: 'Actual Dataset',
    backgroundColor: 'Blue',
    borderWidth: 1,
    data: [50,20,30,40,30,70]
  }]
};

var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true,
      }]
    },
  }
});