Unable to change canvas css

userF4al1 0
Viewed 38

I am working with HTML And css, i have canvas(showing line graph), But i want to change "background color" and some other css changes,How cna i do this ? Here is my current code

<div class="chartContainer" id="canvas" style="height: 300px; width: 100%;"></div>
<script>
canvas.setAttribute('width', window.innerWidth);
canvas.setAttribute('height', window.innerHeight);
let ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(0,0,canvas.width, canvas.height);
</script>
canvas javascript css html
1 Answers

With your code I can see that you are using some library (i.e. Chart.js or Echarts etc)

In these libraries where CANVAS is used to draw Charts Styling is not done with css, Instead you have to make changes inside script.

Could you be more specific about what changes you want to do & which Library or Reference you are using ?? So that I can tell you exactly what and where to change !!

UPDATE

@Rick - Please find code for Changing Styles:

1- For Changing Marker(red) & Line Colors(blue) Use like this :

const Mychart = new Chart(ctx, {
    data: {
        datasets: [{
            backgroundColor: 'red',
            borderColor: 'blue',
        }]
    }
});

2- For changing Canvas Background in Chart.js There is no built-in method but you can try if below codes works :

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

or you may also set css Backgroundcolor on canvas.

But as a Designer I will never recommend using Color on Background of Any Chart, you should make it Default White Color only.

ONE MORE SUGGESTION, Use Echarts Library It is highly Customizable Look at this Example : ECharts 4.0 - Line Chart with Toolbox and Theme

KRISHNA0
Related