How to generate chart using C3.js

Key takeaways:

• C3.js simplifies creating interactive and dynamic charts in JavaScript, making data visualization more accessible.

• A wide variety of chart types are available, such as line, spline, bar, and pie, providing flexibility for different data needs.

• The generate() method is central to C3.js, allowing you to define and render charts by specifying arguments like chart type and data.

• The bindto argument in generate() specifies the HTML element for chart display, while data defines the chart’s content and type.

• A basic example demonstrates setting up a pie chart by including C3.js and D3.js, defining a container, and configuring data within generate().

• C3.js allows importing data from external sources, such as CSV files, to handle large datasets more efficiently.

Charts are a powerful tool for visualizing data, helping us uncover patterns, trends, and insights. By turning numbers into visual representations, they make complex data easier to interpret and analyze. The JavaScript library C3.js simplifies the process of creating interactive and dynamic charts, offering a range of chart types, such as line, spline, bar, and pie. With C3.js, you can present data in a way that’s visually engaging and easy to understand, supporting both data analysis and reporting needs. In this Answer, we will discuss how C3.js makes it easy for us to generate charts.

The generate() method

The C3.js library uses the generate() method to generate and render the different types of charts. We can generate any chart by defining its type within the generate() method. Let's discuss the basic syntax of the generate() method.

We can generate charts by calling this method with multiple arguments. For example, the bindto argument value consists of the id or class of the HTML element where the chart will be displayed.

Code example

Let's run the following code to see how C3.js generates the pie chart using the generate() method:

Code explanation

Let's discuss the above code in detail:

• Lines 3–5: Including C3.js library using its CDN links. Also, we include D3.js library as C3.js depends on it.

• Lines 8–11: Defining a place where the chart will displayed on the web page by creating a div with class piechart.

• Line 14: Calling generate() method with necessary arguments for pie charts.

• Lines 17–21: Defining data for the pie chart using the columns object.

• Line 22: Defining the type of the chart, e.g., pie in our case.

Importing data

The next question that comes into our mind is how we can import data instead of manually defining it within the generate() method as applications usually consist of large datasets. The C3.js library provides the url argument within the data object of the generate() method. Suppose we want to load data from the CSV for the pie chart. Let's run the following example to determine how we can achieve it.

On line 17, we have simply loaded the data using the URL of the CSV file. C3.js also provides hover functionality by default, e.g., when we hover over the pie chart, it shows a data label with its value.

Conclusion

That's it for the chart generation of the C3.js. We can effortlessly create interactive charts using generate() method to enhance the data visualization of the application.