Chart Js Negative Scale

Question

i need start Bar Chart scale in negative values, i am using Chart Js in 2.7.0 Version.

the chart must go from -10 to 100.

Image Example:

it's possible?

var canvas = document.getElementById('myChart');
var data = {
    labels: ["Test"],
    datasets: [
        {
            label: "-10 to 100",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [100],
        }
    ]
};
var option = {
 scales: {
   yAxes:[{
      stacked:true,
        gridLines: {
         display:true,
          color:"rgba(255,99,132,0.2)"
        }
    }],
    xAxes:[{
      gridLines: {
         display:false
        }
    }]
  }
};

var myBarChart = Chart.Bar(canvas,{
 data:data,
  options:option
});

Jsfiddle : https://jsfiddle.net/LilNawe/Luaf2tm4/636/

user_4603860 · Answer

Hi you can try this: you can define the min or max value by passing an object to tick property.

For more detail please visit this link: http://www.chartjs.org/docs/latest/axes/radial/linear.html#tick-options

var option = {
  scales: {
    yAxes: [
      {
        stacked: true,
        gridLines: {
          display: true,
          color: "rgba(255,99,132,0.2)"
        },
        ticks: {
          suggestedMax: 100,
          suggestedMin: -10
        }
      }
    ],
    xAxes: [
      {
        gridLines: {
          display: false
        }
      }
    ]
  }
};

user_12699502 · Answer

You can use the code below to set the range of the y-axis in any chart js graph. In this example, the minimum y-axis value is -100 and the maximum y-axis value is 100.

option: {    
  scales: {
    yAxes: [{
    ticks: { min: -100, max: 100 },
    }], 
  },
}

But when using the above code, the gap between ticks(stepSize)/ gridline define automatically. So you have to set stepSize value like below. In this example, use stepSize value as 10 and you can see gridlines with a gap of 10.

option: {    
  scales: {
    yAxes: [{
      ticks: { min: -100, max: 100, stepSize: 10 },
    }], 
  }
}

So the final code will look like below according to the above question and given an explanation.

var canvas = document.getElementById("myChart");

var data = {
  labels: ["Test"],
  datasets: [
    {
      label: "-10 to 100",
      backgroundColor: "rgba(255,99,132,0.2)",
      borderColor: "rgba(255,99,132,1)",
      borderWidth: 2,
      hoverBackgroundColor: "rgba(255,99,132,0.4)",
      hoverBorderColor: "rgba(255,99,132,1)",
      data: [100],
    },
  ],
};

var option = {
  scales: {
    yAxes: [
      {
        ticks: { min: -10, max: 100, stepSize: 10 },
      },
    ],
    xAxes: [
      {
        gridLines: {
          display: false,
        },
      },
    ],
  },
};

var myBarChart = Chart.Bar(canvas, {
  data: data,
  options: option,
});

user_2358409 · Answer

Since Chart.js v2.9.0, you can do this using floating bars. Individual bars can not be specified with syntax [min,max].

var canvas = document.getElementById('myChart');
var data = {
    labels: ["Test"],
    datasets: [{
            label: "-10 to 100",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [[-10, 100]],
        }]
};
var option = {
 scales: {
   yAxes:[{
        gridLines: {
          display:true,
          color:"rgba(255,99,132,0.2)"
        }
    }],
    xAxes:[{
     gridLines: {
          display:false
        }
    }]
  }
};

var myBarChart = Chart.Bar(canvas,{
 data:data,
    options:option
});

Chart Js Negative Scale

3 Answers