Adding Y Grid Lines

In this article you will learn how to  add Y Axis gridlines. Gridlines are especially useful for benchmarking and comparisons.



Now, Open the visualization where you want to add Y Gridlines.







Then, add the script. You will have to define the values wherein you want the lines to be added.



Javascript Code:

hi_container.set("postExecution", function () {
Hdi.c3chart.ygrids.add([
{value: 20,class:'grid1', text: 'Minimum'},
{value: 40, class:'grid2',text: 'Maximum'}
]);
});

You also have the option to change the text color, font and color of gridlines via adding the CSS style by defining IDs in script and referring them in CSS.



CSS Code :

.c3-ygrid-line.grid1 line {
stroke: red;
}
.c3-ygrid-line.grid1 text{
fill: red;
font-size: 10px;
}
.c3-ygrid-line.grid2 line {
stroke: green;
}
.c3-ygrid-line.grid2 text{
fill: green;
font-size: 10px;
}

On executing code the output will be :







Similarly, you can design grid lines for x axis.



Also, you can add other script and styles in addition for further customization.



For More Info, Contact us at demo@helicalinsight.com