I am trying to use chart.js to create a simple live line/scatter chart, z-indexed to act as a backdrop for my app. For some reason, it's rendering as an opaque gray color instead of the reddish color I've specified. And, even though I've tried changing the other chart elements and defaults the chart is always gray. I'm sure it's a trivial fix but just i can not figure it out.

Here is the link to a JS Bin that has the full code.(You'll need to set and start the timer before the chart will have any data to show) Also, more specifically, this is the JS code related to creating the chart:

var ctx = document.getElementById('canvas').getContext("2d"),
points = [{x:0,y:0}],
lineData = {
    datasets: [{
        fillColor: "rgba(217, 108, 99, .9)",
        strokeColor: "rgba(255, 255, 255, 1)",
        pumpntHighlightStroke: "rgba(220,220,220,1)",
        data: points
    }]
},
lineOptions = {
    showScale: false,
    scaleShowLabels: false,
    scaleShowGridLines : false,
    pointDot : false,
    pointDotRadius : 0,
    pointDotStrokeWidth : 0,
    pointHitDetectionRadius : 0,
    datasetStroke : true,
    datasetStrokeWidth : 3,
    datasetFill : true,
};
Chart.defaults.global.elements.point.radius = 0;
Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips.enabled = false;
Chart.defaults.global.animation.duration = 250;
Chart.scaleService.updateScaleDefaults('linear', {
    display: false,
    ticks: {
        beginAtZero: true,
        min: 0
    }
});
Chart.defaults.global.elements.line.tension = 0.05;
Chart.defaults.global.maintainAspectRatio = false;

myChart = new Chart(ctx, {
    type: 'scatter',
    data: lineData,
    options: lineOptions
});

Thank you for your time. please let me know if there is anything further I can explain.

I am trying to use chart.js to create a simple live line/scatter chart, z-indexed to act as a backdrop for my app. For some reason, it's rendering as an opaque gray color instead of the reddish color I've specified. And, even though I've tried changing the other chart elements and defaults the chart is always gray. I'm sure it's a trivial fix but just i can not figure it out.

Here is the link to a JS Bin that has the full code.(You'll need to set and start the timer before the chart will have any data to show) Also, more specifically, this is the JS code related to creating the chart:

var ctx = document.getElementById('canvas').getContext("2d"),
points = [{x:0,y:0}],
lineData = {
    datasets: [{
        fillColor: "rgba(217, 108, 99, .9)",
        strokeColor: "rgba(255, 255, 255, 1)",
        pumpntHighlightStroke: "rgba(220,220,220,1)",
        data: points
    }]
},
lineOptions = {
    showScale: false,
    scaleShowLabels: false,
    scaleShowGridLines : false,
    pointDot : false,
    pointDotRadius : 0,
    pointDotStrokeWidth : 0,
    pointHitDetectionRadius : 0,
    datasetStroke : true,
    datasetStrokeWidth : 3,
    datasetFill : true,
};
Chart.defaults.global.elements.point.radius = 0;
Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips.enabled = false;
Chart.defaults.global.animation.duration = 250;
Chart.scaleService.updateScaleDefaults('linear', {
    display: false,
    ticks: {
        beginAtZero: true,
        min: 0
    }
});
Chart.defaults.global.elements.line.tension = 0.05;
Chart.defaults.global.maintainAspectRatio = false;

myChart = new Chart(ctx, {
    type: 'scatter',
    data: lineData,
    options: lineOptions
});

Thank you for your time. please let me know if there is anything further I can explain.

• javascript
• chart.js

1 Answer 1

I think this is because you don't use the correct properties. According to the docs (http://www.chartjs/docs/), you should use backgroundColor, not fillColor.

See the first example in the doc: http://www.chartjs/docs/#getting-started-creating-a-chart

     datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]

Note that strokeColor doesn't exist aswell.