CODEWITHSUNDEEP
javascriptchartschart.js
henonChesser
henonChesser

Reputation: 167

Setting Limits on Chart.JS

Is there a way to hard code the min an max Y-axis on in chart.js? I've got my basic setup in the fiddle, but I don't see anything in the documentation for the plugin.

On a second note, is there a way to prevent something like this from not taking up the entire canvas? I'd like to scoot the graph over maybe 60 pixels and put an image there.

EDIT:

http://jsfiddle.net/cf1pfyg3/

Here's my current code!

    var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

var barChartData = {
    labels : ["Zinc","Boron","Sulphur","Potassium","Nitrogen","Aluminium","Iron"],
    barstroke: true,
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data : [1,2,3,4,5,6,7]
        },

    ]

}

    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
        barstroke: true,
        responsive : true
    });

Upvotes: 0

Views: 2855

Answers (1)

henonChesser
henonChesser

Reputation: 167

Little more Digging an came up with his from do documentation:

 var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

var barChartData = {
    labels : ["Zinc","Boron","Sulphur","Potassium","Nitrogen","Aluminium","Iron"],
    barstroke: true,
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data : [1,2,3,4,5,6,7]
        },

    ]

}
window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
        barstroke: true,
        responsive : true,
        // Boolean - If we want to override with a hard coded scale
        scaleOverride: true,

        // ** Required if scaleOverride is true **
        // Number - The number of steps in a hard coded scale
        scaleSteps: 14,
        // Number - The value jump in the hard coded scale
        scaleStepWidth: 1,
        // Number - The scale starting value
        scaleStartValue: 0
    });
}

Upvotes: 1

Related Questions