CODEWITHSUNDEEP
javascripthtmlchartschart.js
Body
Body

Reputation: 3688

chartjs - Not taking the height in reponsive chart

I'm using chartjs (http://chartjs.org). I'm trying to give a specific height to my chart but its not taking it. Chart is set to responsive thus I'm using width 100%. Please check my codes below and the pen.

Javascript /* * Line Chart */

var randomScalingFactor = function(){ return Math.round(Math.random()*50)};
var lineChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            label: "My First dataset",
            fillColor : "rgba(220,220,220,0.2)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(220,220,220,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
            label: "My Second dataset",
            fillColor : "rgba(151,187,205,0.2)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(151,187,205,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }
    ]

}

window.onload = function(){ 
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true
    });
}

HTML

<div style="width: 100%; height: 300px">
    <canvas id="canvas"></canvas>
</div>

Codepen - http://codepen.io/rushenn/pen/PwGjOr

How can I set a specific height on a responsive chart?

Upvotes: 0

Views: 858

Answers (1)

Sushant Aryal
Sushant Aryal

Reputation: 3335

Have you tried giving height directly to the canvas instead of that wrapper div?

try this css.

    canvas{
        width: 100% !important;
        max-width: 1000px;
        height: auto !important;
    }

and

<canvas id="canvas" width="1000" height="300"></canvas>

This code works on mine.

Upvotes: 2

Related Questions