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'll 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 web pages. 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 the 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 the 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 customize the grid lines on your charts’ X-axis. These grid lines help direct 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’ll illustrate different examples of APIs. A bar chart has been used to show team performance in different months. Here are 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.js 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.
Free AI Mock Interviews
Coding Interview
Coding PatternsFree Interview
Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.
System Design
You TubeFree Interview
Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved