The next chart shows how to create a basic line chart, there is one additional configuration using the chart-points directive. You can set the size of the points using this diective.

    <c3chart bindto-id="chart1" show-labels="true">
        <chart-column column-id="line1"
                      column-name="Line 1"
                      column-color="green"
                      column-values="30,200,100,400,150,250"
                      column-type="line"/>
        <chart-points point-radius="5"
                      show-point="true"
                      point-expand-enabled="true"
                      point-expand-radius="10"/>
    </c3chart>

Now there are a lot of options available to you to configure. We can add a second line of data, but we can also configure vertical axes. That is what we will do in the next example. We add a second chart-column element. This line1 and bar1 axis have a different scale, that is what we configure in the chart-axes element. The attributes y and y2 which columns use which y axis. If you have more than two chart-columns you can comma separate them to attach them to the two different vertical axes.

<c3chart bindto-id="chart2">
    <chart-column column-id="line1"
                  column-name="Line 1"
                  column-color="red"
                  column-values="30,200,100,400,150,250"
                  column-type="spline"/>
    <chart-column column-id="bar1"
                  column-name="Bar 1"
                  column-color="green"
                  column-values="50,20,10,40,15,25"
                  column-type="bar"/>
    <chart-axes y="line1" y2="bar1"/>
</c3chart>

In the next sample we are going to do something else that is cool, we are going to rotate the graph using the directive chart-axis.

<chart-axis axis-rotate="true"/>

In the next bar chart we are demonstrating what you can do with formatting ticks. We add multiple configurations for the x-tick as well as the y-tick.

<c3chart bindto-id="chartTickSample">
    <chart-column column-id="line1"
                  column-name="Line 1"
                  column-color="red"
                  column-values="30,200,100,400,150,250"
                  column-type="spline"/>
    <chart-column column-id="bar1"
                  column-name="Bar 1"
                  column-color="green"
                  column-values="50,20,10,40,15,25"
                  column-type="bar"/>
    <chart-axis>
        <chart-axis-x axis-position="outer-center" axis-label="Number by 10"
                      axis-type="category">
            <chart-axis-x-tick tick-rotate="50"/>
        </chart-axis-x>
        <chart-axis-y>
            <chart-axis-y-tick tick-values="50,100,150,200,250"/>
        </chart-axis-y>
    </chart-axis>
</c3chart>

In the next bar chart we are demonstrating what you can do with regions. We add multiple regions for each line.

<c3chart bindto-id="chartRegionSample">
    <chart-column column-id="line1"
                  column-name="Line 1"
                  column-color="green"
                  column-values="2010,2011,2012,2013,2014,2015"
                  column-type="line"/>
    <chart-column column-id="x1"
                  column-name="Line 1"
                  column-color="green"
                  column-values="30,200,100,400,150,250"
                  column-type="line"/>
    <chart-column column-id="line2"
                  column-name="Line 1"
                  column-color="green"
                  column-values="2011,2012,2013,2014,2015"
                  column-type="line"/>
    <chart-column column-id="x2"
                  column-name="Line 1"
                  column-color="green"
                  column-values="250,150,300,250,200"
                  column-type="line"/>
    <chart-points point-radius="5"
                  show-point="true"
                  point-expand-enabled="true"
                  point-expand-radius="10"/>
    <chart-region region-id="x1"
                  region-style="dashed"
                  region-starts="2011"
                  region-ends="2013"></chart-region>
    <chart-axes values-xs="x1:line1,x2:line2"></chart-axes>
</c3chart>