CODEWITHSUNDEEP
reactjschart.js
Anton
Anton

Reputation: 2138

Add rectangle fill to line chart

Is it possible to add draw a rectangle as a background of Line chart? I'm using react-chartjs-2 and cannot find any examples with drawing a canvas as background...

Upvotes: 0

Views: 813

Answers (2)

Anton
Anton

Reputation: 2138

managed to do this with following code:

const plugins = [
  {
   beforeDraw: (chartInstance, easing) => {
   const ctx = chartInstance.chart.ctx;
   ctx.fillStyle = "lightgreen";
   ctx.fillRect(30, 200, 955, 50);
  },
 },
];
//...
<Line
    data={data}
    plugins={plugins}
  />

Upvotes: 1

John Arnok
John Arnok

Reputation: 632

You can draw it before the Line chart with drawTime: 'beforeDatasetsDraw'

Upvotes: 0

Related Questions