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.

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.

• javascript
• chart.js

2 Answers 2

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'
    }
}

P.s: 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

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,
      }]
    },
  }
});