fillOpacity: Number

Sets opacity of the filled color.

Default: .7 for Area Charts and 1 for all other chart types. 
var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 data:[{
    type : "area",
    fillOpacity: .3, 

  },
 ]
 .
 .
});
chart.render();
Try Editing The Code

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

9 Comments

    • Anjali says:

      shravan,

      fillOpacity applies only to filled areas like in case of area, column, etc. Hence it does not apply to line charts.

    • Sunil Urs says:

      fillOpacity applied to the dataSeries/dataPoint. Color remains same as the default or user set value – color property on dataSeries/dataPoint. May I know what you mean by fillOpacity Color??

  3. Artyom says:

    I mean it would be great to add an option to change the fill color, making it independent from the area chart color. For example, the area line could be blue, and the fill color red.

    • Naveen Venugopal says:

      This feature is not available yet. It will be a nice feature to have. We’ll consider adding into our future version.

If you have any questions, please feel free to ask in our forums. Ask Question