How to generate a custom chart using C3.js

Learning to customize charts is essential for making them look exactly how we want. With C3.js, a powerful charting tool, it’s easy to customize. At the core of this customization is the c3.generate() function, which acts as the gateway to providing many creative possibilities. By giving it an object with different properties, we can easily change things like the chart’s size, colors, and labels. In this Answer, we’ll learn about these properties and practical examples of adding customization to a bar chart.

Customization options

Let’s discuss some customization options in C3.js. With these, we can easily tweak the chart’s appearance to suit our preferences and create visually appealing displays.

The axis and grid properties

The axis property is used to customize the chart’s axes. It’s an object that contains two properties: x and y. The x property is used to customize the x-axis, while the y property is used to customize the y-axis.

On the other hand, the grid property is used to customize the chart’s grid lines. It’s an object that contains two properties: x and y. The x property is used to customize the vertical grid lines, while the y property is used to customize the horizontal grid lines.

The regions property

The regions property is used to highlight a specific region of a chart. It’s useful when we want to draw attention to a particular area of the chart, such as a period of time or a range of values. The regions property takes an array of objects, where each object represents a region. Each region object has two properties: start and end, which specify the start and end points of the region, respectively. We can also specify additional properties such as class, style, and label to customize the appearance of the region.

Interaction and legend

The interaction in C3.js allows us to enable or disable various interactions with the chart. For example, we can enable or disable zooming or show a subchart.

On the other hand, the legend property in C3.js is used to customize the appearance and behavior of the chart legend. We can use it to change the position, orientation, and alignment of the legend, as well as the font size, color, and style.

The tooltip and chart properties

The tooltip property is used to display additional information about the data points when the user hovers over them. The tooltip can be customized to display different information, such as the data point’s value, name, or other attributes.

On the other hand, the chart options allow us to customize the chart’s appearance and behavior. For example, we can specify the chart’s size, padding, duration of the transition animation, or color scheme for the chart.

Let’s customize a basic bar chart using the above customization features.

Code example

In the following example, we’re illustrating the performance of three teams across four quarters, and we've applied different C3 customization options to it.

Code explanation

• Lines 3–5: We include the C3.js library using its CDN links. We also include the D3.js library because C3.js depends on it.

• Lines 9–12: We define a place where the chart will displayed on the web page by using a div tag with the barchart class.

• Line 15: We call the generate() method with necessary arguments for bar charts.

• Lines 17–24: We define the data for the bar chart using the columns object.

  • Line 23: We define the type of the chart, e.g., bar in our case.

• Lines 26–34: We set up the x-axis to be of the category type, indicating that the data points on the x-axis are categorical rather than numerical. The categories represent the quarters as an array: ['Q1', 'Q2', 'Q3', 'Q4'].

• Lines 36–43: We set up the grid for both the x-axis and y-axis. The show: true property ensures that both the horizontal (x) and vertical (y) grid lines are displayed on the chart.

• Lines 45–55: The regions property specifies a region on the x-axis starting at position 2 and assigning the CSS class regionXX to that region. We can change its CSS from style.css file. The legend option’s show property set to true ensures that the legend is displayed. The zoom option’s enabled property set to true enables the zoom functionality, allowing users to zoom in on specific areas of the chart.

• Lines 56-66: The subchart options’s show property set to true indicates that the subchart should be displayed. It provides a zoomed-in view. For the tooltip option, show: true ensures that tooltips are displayed. The size property specifies the height and width of the chart.

Conclusion

To sum up, C3.js provides a powerful toolkit for creating and customizing charts. With properties like axis and grid, we can easily adjust the chart’s axes and grid lines to fit our needs. The regions property highlights specific chart areas, making important data stand out. Interaction options like zoom and subchart enhance user experience, while the legend property allows detailed customization of the chart’s legend. tooltip and other chart options offer further customization of the chart’s appearance and functionality. By combining these features, as shown in the example bar chart, we can effectively display data in an engaging and informative way.