Learning C3.js – Lesson 4 – Bar Charts

Last updated on 2019-10-30

Previous lesson: Learning C3.js – Lesson 3 – Line Charts

Bar charts are the method to represent categorical data series, in which each category has a numerical value. They are very good for comparison between different series because the bars give each data point a high visual representation that makes it faster for us to process the difference between the series. So please, don’t plot categorical data using line charts (like this example), and please don’t mess with too much with the axes to make your data look different from what it really represents (as shown here).

Let’s jump right into the code. Creating a basic bar chart is as simple as creating a line chart:

var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
        ],
        type: 'bar'
    }
});

Which produces this:

Adding a second series is as simple as adding a new row to the columns array:

var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 250, 80, 350, 200, 220],
            ['data3', 20, 120, 180, 200, 100, 270],
        ],
        type: 'bar'
    },
});

Which produces this:

Sometimes bar charts are used to display data for series that have long names (like “City, Country”). In cases like this, it’s good practice to rotate the axis to the name of the series is on the Y-axis and the values grow on the X-axis. Let’s see how we generate a chart to visualize the amount of widgets produced and sold by a company in several worldwide locations.

var chart = c3.generate({
    bindto: '#chart',
    data: {
        x: 'x',
        columns: [
            ['x', 'London, UK', 'Paris, France', 'Milan, Italy', 'Frankfurt, Germany', 'Chicago, USA'],
            ['Widgets Produced', 30, 200, 100, 400, 150],
            ['Widgets Sold', 50, 250, 80, 350, 200],
        ],
        type: 'bar'
    },
    axis: {
        rotated: true,
        x: {
            type: 'category'
        }
    },
});

Which produces this:

Good but not quite there yet. As in the previous lesson, a label in the axis is broken. Let’s fix this and also add a couple more things to beef this up as a final example for bar charts: I’ll add vertical lines to make it easier to see what is the approximate value of each bar, a “target” line to mark which location is selling enough widgets and which isn’t, and the cherry on top, the value of each bar will also be shown.

var chart = c3.generate({
    bindto: '#chart',
    padding: {
        left: 100,
    },    
    data: {
        x: 'x',
        columns: [
            ['x', 'London, UK', 'Paris, France', 'Milan, Italy', 'Frankfurt, Germany', 'Chicago, USA'],
            ['Widgets Produced', 30, 200, 100, 400, 150],
            ['Widgets Sold', 50, 250, 80, 350, 200],
        ],
        type: 'bar',
        labels: true
    },
    axis: {
        rotated: true,
        x: {
            type: 'category'
        }
    },
    grid: {
        y: {
            show: true,
            lines: [
                { value: 180, text: 'Sales target', position: 'middle' },
                { value: 250, text: 'Production target', position: 'end'}
                ]
        }
    }
});

Resulting in this lovely chart:

Some things can still be improved in the chart, but the result is pretty amazing for the small amount of effort to create it. You can find the code for this lesson (and all other lessons) in my GitHub repository.

That’s all for today. Until next time, happy coding!

Next lesson: Learning C3.js – Lesson 5 – Mixing Chart Types.