CODEWITHSUNDEEP
htmlcsscanvasjs
Raz Weizman
Raz Weizman

Reputation: 89

CanvasJS Transparent Background

I'm trying to add transparency to my CanvasJS background. CanvasJS uses backgroundColor in order to choose the color of the background of the canvas.

I tried writing "None" instead of a color code but it's giving me a black background.

Also it would be nice to have the ability to choose different opacities for the background.

Upvotes: 0

Views: 6241

Answers (5)

Razia sultana
Razia sultana

Reputation: 2211

<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

Full demo http://jsfiddle.net/canvasjs/7b0xdcwv/

Upvotes: 0

Kh&#225;nh B&#249;i Nguyễn Thiện
Kh&#225;nh B&#249;i Nguyễn Thiện

Reputation: 31

According to Canvasjs document you will be able to set background color, use rgba(0, 0, 0, 0) for transparent (of course you can change the inside values to fix your purpose):

window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
        text: "Title with Background Color",
        padding: 5,
        backgroundColor: rgba(0, 0, 0, 0),
      },
      data: [
      {
        type: "column",
        dataPoints: [
        { x: 10, y: 71 },
        ]
      }
      ]
    });

    chart.render();
  }

Hope this help :)

Upvotes: 0

Vishwas R
Vishwas R

Reputation: 3420

To set transparent background you can set backgroundColor: "transparent". And if you like to give transparency to any color you can use rgba color coding, for example: backgroundColor: "rgba(225,150,150,0.5)".

Upvotes: 7

Raz Weizman
Raz Weizman

Reputation: 89

I found the answer eventually. You can just have the backgroundColor with en empty string (backgroundColor:'') and it will omit the background color and leave it transparent.

I would still like to know if it's possible to add transparency to a color, so if anyone knows, please comment.

Upvotes: 1

Jleibham
Jleibham

Reputation: 530

You can set background-color: transparent; and it will show no color.

Opacity can be set by using rgba. For white 50%, it would be background-color: rgba(255, 255, 255, .5);

I've never used CanvasJs and don't know how that script will effect things but in basic CSS these will do the trick.

Upvotes: 1

Related Questions