Chartjs-Can you override Material UI effects while using Chart Js?

by

0👍

you need to define the chart stylings otherwise parent styling override the chart in some cases. below code worked for me –

<div
  style={{
    background: "linear-gradient(180deg, #1a1a1a 10%, #4b4b4b 75%)",
    color: "#1b1b1b",
    height: "200px",
    width: "100%",
  }}
>
  <Paper sx={{ w: 250, h: 400, background: 'red' }}>
      <canvas style={{ background: 'white' }} id="chart-id" />
  </Paper>
</div>

here you can see I have defined my chart background. In your code I can see a component Line. Guessing it is a wrapper around the main chart. you need to add the stylings to the element which has the id/ref for chart. you can pass style/className as props to Line component and then assign those to the chart element. Let me know if this answer helps.

Leave a comment