Adding X Grid lines

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



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







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



Javascript Code :

hi_container.set("postExecution", function () { 
Hdi.c3chart.xgrids.add([             // gridline code for X axis             
{value: 'Hyderabad',class:'grid3', text: 'Hyderabad'},  
         // define the points where you want gridline, points are customizable
         // you can use as many gridlines you want 
{value: 'Bangalore', class:'grid4',text: 'Bangalore'} 
]); 
}); 

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-xgrid-line.grid3 line {
stroke: red;                      // color is cuatomizable
}
.c3-xgrid-line.grid3 text{
fill: red;                    // color is customizable
font-size: 10px;            // define font size
 } 
.c3-xgrid-line.grid4 line { 
stroke: green;              // color is customizable
} 
.c3-xgrid-line.grid4 text{ 
fill: green;               // color is customizable
font-size: 10px;           // define font size 
} 

On executing code the output will be :







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



For more info, contact us at demo@helicalinsight.com