In this article you will learn about how to highlight any region in X axis or Y axis. This is especially useful for benchmarking and comparisons.
Now, open the visualization where you want to highlight certain region.
Then, add the script, for adding the region in the chart. You will have to define the values wherein the region should be highlighted.
Javascript Code:
hi_container.set("postExecution", function () {
Hdi.c3chart.regions.add( {axis: 'y', start: 20, end: 40, class: 'regionY1'} ),
Hdi.c3chart.regions.add( {axis: 'y', start: 60, end: 80, class: 'regionY2'} ),
Hdi.c3chart.regions.add( {axis: 'x', start: 1, end: 2, class: 'regionX1'} ),
Hdi.c3chart.regions.add( {axis: 'x', start: 3, end: 4, class: 'regionX2'} );
// used for defining region on x and y axis, can be customizable
});
By adding the CSS styles, you also have the option to change the color etc.
CSS Code:
.c3-region.regionY1,.
c3-region.regionY2
{ fill: red; // color can be customizable } .c3-region.regionX1,
.c3-region.regionX2
{ fill: green; // color can be customizable }
On executing the code output will be
From the above output, regions are created for X-axis and Y-axis. Also, you have the option to create as many regions you want. This customization is applicable on all axis charts. In addition, you can add other CSS and Javascripts for more customization.
For more info, contact us at support@helicalinsight.com