C3.js is a high-level API on top of D3.js. It has an active community for support, is highly customizable, and benefits from having great code reusability. It has a steep learning curve and is more limited when it comes to the number of charts offered.
Javascript is the base language by which people build charts and websites for the web. There are many additional frameworks that are built on top of Javascript. Learning Javascript is an absolute must for modern web development, particularly when it comes to using a charting library.
C3.js is a D3-based reusable chart library that enables deeper integration of charts into web applications. Below is a basic example of how to create a simple line chart using C3.js.
First, ensure you include C3.js and D3.js libraries in your HTML file. Here's how to include them:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
// C3.js code will go here
</script>
</body>
</html>
Below is the JavaScript code that you will need to insert within the <script> tags in your HTML file. This code will generate a simple line chart.
var chart = c3.generate({
bindto: '#chart', // This will bind the chart to the div with id 'chart'
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 120, 210, 140, 115, 425]
]
}
});
This code initializes a chart and binds it to the HTML element with the id 'chart'. It then specifies two data series (data1 and data2) to be plotted as a line chart.
C3.js offers extensive customization options. For example, to add a title to your chart, you can modify the chart initialization code as follows:
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 120, 210, 140, 115, 425]
]
},
title: {
text: 'My First C3 Chart'
}
});
For further customizations and more advanced charts, refer to the C3.js official documentation and explore the rich examples provided there.
