A basic bar chart with a specified color and values through the chart-column directive. The other directive shown is the chart-bar directive. In this case we specify the ration of the bar width in relation to the total available with. A value smaller than 1 gives more space.

<c3chart bindto-id="chart1" show-labels="true">
    <chart-column column-id="bar1"
                  column-name="Bar 1"
                  column-color="green"
                  column-values="30,200,100,400,150,250"
                  column-type="bar"/>
    <chart-bar ratio="0.8"/>
</c3chart>

In the next example we add a second column, or better bar. This time we also add a chart-column for x values. We have to specify this column as a type Category in the chart-axis-x directive.

<c3chart bindto-id="chart2" show-labels="true">
    <chart-column column-id="x"
                  column-values="period 1,period 2,period 3,period 4,period 5,period 6"/>
    <chart-column column-id="bar1"
                  column-name="Bar 1"
                  column-color="green"
                  column-values="30,200,100,400,150,250"
                  column-type="bar"/>
    <chart-column column-id="bar2"
                  column-name="Bar 2"
                  column-color="red"
                  column-values="50,100,200,300,350,450"
                  column-type="bar"/>
    <chart-bar ratio="0.8"/>
    <chart-axes values-x="x"/>
    <chart-axis>
        <chart-axis-x axis-position="outer-center"
                      axis-label="The periods"
                      axis-type="category"/>
    </chart-axis>
</c3chart>

If you have a bar chart with multiple chart-columns, the default behavior is to place the bars next to each other. You can also group the bars so that are stacked. That is what the following example shows. Using the chart-group directive we can use the group-values attribute. Give it a comma separated column id's that need to be grouped.

    <chart-group group-values="bar1,bar2"/>

Now to show that you can also create a button to use grouping or not, we use the callback feature of the library

Toggle grouping