Couleur de fond de la carte

J’ai un problème avec le graphique js, je veux colorier la zone graphique comme l’image ci-dessus entrez la description de l'image ici

J’essaie de trouver la configuration à partir de charJs Docs , mais rien ne correspond. est-il possible ou non de changer la couleur de fond de la zone de graphique? si possible quelqu’un peut m’aider?

Html

 

Javascript

 var ctx = document.getElementById("barChart"); var barChart = new Chart(ctx,{ 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 } }); 

Voici mon code actuel jsFiddle

afin que chacun puisse essayer de trouver une solution. Merci de votre aide.

    Il n’y a pas de méthode intégrée pour changer la couleur de fond, mais vous pouvez utiliser CSS. JSFiddle .

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

    MODIFIER

    Si vous voulez remplir exactement la zone du graphique et pas une division entière, vous pouvez écrire votre propre plugin chart.js. Essayez-le sur 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);