How to use C3.js APIs

Key takeaways:

  • C3.js APIs provide a flexible and powerful way to customize and interact with charts, allowing for dynamic updates and data visualization.

  • Common APIs include flow, names, colors, range, labels, xgrids, and resize, each offering specific functionalities for modifying chart elements.

  • By understanding and effectively using these APIs, developers can create visually appealing and interactive charts that effectively convey data insights.

C3.js abstracts away the intricacies of low-level charting libraries, allowing developers to focus on their data and design intent. The real magic lies in C3.js’s APIs for dynamic manipulation. In this Answer, we will learn about different APIs provided by C3.js in detail.

C3.js APIs

C3.js provides multiple APIs, making it easier for programmers to create interactive and visually appealing charts on webpages. Some of these APIs include options for customizing colors, labels, and data formatting, empowering beginners to personalize their charts with ease.

APIs provided by the C3.js
APIs provided by the C3.js

Let's explore the purpose and examples of these APIs:

The flow API: This API in C3.js allows us to dynamically load or unload data as flowingIn the context of C3.js, "flowing" refers to the gradual, animated update of the chart data.. Let's see the syntax of the flow() API:

// Update the chart using the 'flow' method
chart.flow({
columns:'' ,// Add new data columns
length: 0, // Set animation duration (0 for instant update)
done: function() {
// Optional callback function after the flow is complete
console.log('Data flow completed!');
}
});
Syntax of flow() API

The names API: This API allows us to update labels of the data names. Let's see how to update it using names() API:

//Option 1: Use names within the generate method
names: {
data1: 'Custom Name for data1', // here data1 is your data name
}
names() API syntax

The colors API: This API allows us to update the colors of the data in charts. Let's see how to update the colors using colors():

//Option 1: Use colors within the generate method
colors: {
data1: '#ff0000', // here data1 is your data name
}
Syntax for colors API

The range API: This API allows us to control the minimum and maximum values shown on the chart axes. Let’s explore how to set axis range using the range:

//Option 1
setTimeout(function () {
chart.axis.range({max: 1000, min: -1000});
}, 5000);
Syntax for range API

The labels API: This API allows us to update the axis labels of the chart. Let’s explore how to set axis labels using the API:

//Option 1: Setting labels within the generate->axis method
axis: {
x: {
label: 'X Axis Label'
},
y: {
label: 'Y Axis Label'
}
}
Syntax for labels API

The xgrids API: This API allows us to customise the grid lines on your charts' X-axis. These grid lines aid in directing the viewer's eye and provide context for the data points. Let’s explore how to update grid lines using this API:

setTimeout(function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
}, 1000);
Syntax for xgrids() API

The resize API: This API allows us to resize the chart. Let’s explore how to resize the chart using this API:

setTimeout(function () {
chart.resize({height:300, width:400})
}, 10000);
Syntax for resize() API

Code example

In the following example, we're illustrating different examples of APIs. A bar chart has been used to show team performance in different months. Here is the following details:

  • X-axis: The x-axis shows months.

  • Y-axis: The y-axis shows the number of tasks performed by a team.

Frequently asked questions

Haven’t found what you were looking for? Contact Us


What is the difference between D3 and c3 js?

  • D3.js is suitable for developers who need complete control over their visualizations and are willing to invest time in learning the underlying concepts.
  • C3.js is a good choice for developers who want to create charts quickly and easily without sacrificing too much customization.

What is the difference between D3 JS and three js?

  • D3.js is the better choice for creating 2D data visualizations.
  • Three.js is the better choice for creating 3D graphics and animations.

What is the difference between JavaScript and three js?

  • JavaScript: The foundation for building web applications and interactive experiences.
  • Three.js: A specialized library for creating immersive 3D graphics and animations.

Copyright ©2024 Educative, Inc. All rights reserved