In this article you will learn about how to change the chart background color and its opacity.
First, open the chart report created using Helical Insight. Also, you can create your own customize report by connecting the datasource with Helical Insight. For your understanding we have used an “AreaSplineChart”.
Default view of a generated chart
By default the background color of the chart is white. Now to set the background color and Opacity of a chart you can use javascript. To apply the Javascript Code, go to Editor tab click on JS Editor, then enter the code and click on Inject to execute the entered code.
Javascript Code
hi_container.set("postExecution", function () {
$('g.c3-event-rects').css('fill-opacity', '0.2').css('fill', 'yellow');
//opacity level 0-1 is customizable
// color: "yellow" is also customizable
});
Output
Similarly, you achieve the same output using CSS code as well. In addition to it, you can use other CSS and Javascript code for more customization.
For more info, contact us at demo@helicalinsight.com