Chart area background color chartjs

There is no built-in method to change background color, but you can use CSS. JSFiddle.

ctx.style.backgroundColor = 'rgba(255,0,0,255)';

EDIT

If you want to fill exact area of chart and no whole div, you can write your own chart.js plugin. Try it on JSFiddle.

        Chart.pluginService.register({            beforeDraw: function (chart, easing) {                if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {                    var ctx = chart.chart.ctx;                    var chartArea = chart.chartArea;                    ctx.save();                    ctx.fillStyle = chart.config.options.chartArea.backgroundColor;                    ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);                    ctx.restore();                }            }        });        var config = {  type: 'bar',  data: {    labels:["Label1","Label2","Label3","Label4"],    borderColor : "#fffff",    datasets: [      {        data: ["2","3","1","4"],        borderColor : "#fff",        borderWidth : "3",        hoverBorderColor : "#000",        backgroundColor: [          "#f38b4a",          "#56d798",          "#ff8397",          "#6970d5"         ],        hoverBackgroundColor: [          "#f38b4a",          "#56d798",          "#ff8397",          "#6970d5"        ]      }]  },  options: {    scales: {      yAxes: [{        ticks:{          min : 0,          stepSize : 1,          fontColor : "#000",          fontSize : 14        },        gridLines:{          color: "#000",          lineWidth:2,          zeroLineColor :"#000",          zeroLineWidth : 2        },        stacked: true      }],      xAxes: [{        ticks:{          fontColor : "#000",          fontSize : 14        },        gridLines:{          color: "#fff",          lineWidth:2        }      }]    },    responsive:false,    chartArea: {        backgroundColor: 'rgba(251, 85, 85, 0.4)'    }  }};        var ctx = document.getElementById("barChart").getContext("2d");        new Chart(ctx, config);

The canvas background is transparent by definition, like any element, so you just need to define the background-color in your canvas, for example, in your case you will need this CSS:

JSFiddle

canvas#barChart {  background-color: #f00;}

or HTML inline, to clarify the idea:

<canvas id="barChart" width="600" height="300" style="background-color: #f00;"></canvas>