0

im using chartJS to display a bunch of measurements. Chart not extanding to the entire width

It seems like the Chart itself is only using a fraction of the canvas. I've found out that it depends on how much values I try to display. On different amounts of datapoints it extends in different ways, but more values doesn't mean it is using more space.

HTML:

<canvas id="myChart" width="1000" height="400"></canvas>

JS:

document.addEventListener("DOMContentLoaded",function(event){
    var ctx = document.getElementById("myChart").getContext("2d");
    var myLineChart = new Chart(ctx).Line({
        labels: ["", "", "", "", "", ""],
        datasets: [{
            data: [5, 8, 6, 1, 2, 9], // Dummy values
        }]
    }, {
        scaleOverride : true,
        scaleStartValue : 0,
        scaleSteps : 10,
        scaleStepWidth : 5,
        pointDot : false,
        scaleXGridLinesStep : 9999
    });
});

I've tried some fixes from the internet:

maintainAspectRatio: false
responsive: true

doesnt work for me ;(

UPDATE:

It seems like this error only occurs only when I use ChartNew.js.

I've also recreated my problem in a JSFiddle

John Slegers
  • 45,213
  • 22
  • 199
  • 169
M4tho
  • 116
  • 2
  • 13
  • 1
    If you set in your options **scaleOverride : false,** do you still have the problem ? Can you recreate your problem in a jsfiddle ? – rtome Feb 24 '15 at 12:27
  • nope it doesnt do anything different when i set **scaleOverride : false** & i've added a jsfiddle link above – M4tho Feb 24 '15 at 13:42
  • 1
    Agreed. It works OK with canvas widths below 600px or above 1080px. It really seems to be a bug which depends on the ratio size-of-dataset / size-of-canvas. I've got no quick solution for you. I'd say report the bug in the github issue queue of the chartnew library : https://github.com/FVANCOP/ChartNew.js/issues – rtome Feb 24 '15 at 16:30

0 Answers0