Configure the grid of the graph

Another feature is that we can add a grid to the chart. We return to our one line of data chart and now add a horizontal grid. In the sample we add a horizontal grid, set show-y to true. But we also add two extra lines with a label. We have to configure the axis to use, the value to draw the line for and the label to place on top of the line.

<c3chart bindto-id="chart3">
    <chart-column column-id="line 1"
                  column-values="30,200,100,400,150,250"
                  column-type="line"/>
    <chart-grid show-x="false" show-y="true">
        <chart-grid-optional axis-id="y" grid-value="20" grid-text="Minimum" position="start"/>
        <chart-grid-optional axis-id="y" grid-value="200" grid-text="Maximum" grid-class="top-item"/>
    </chart-grid>
</c3chart>

Configure the legend

You can hide the legend using the show-legend attribute. A more interesting property is the legend-position attribute. Legitimate values for this property are: bottom, right and inset. When inset is used you can also configure where to place the legend using one of the following values:top-left, top-right, bottom-left, bottom-right.

<c3chart bindto-id="chart-configure-legend">
    <chart-column column-id="line 1"
                  column-values="30,200,100,400,150,250"
                  column-type="line"/>
    <chart-grid show-x="false" show-y="true">
        <chart-grid-optional axis-id="y" grid-value="20" grid-text="Minimum"/>
        <chart-grid-optional axis-id="y" grid-value="200" grid-text="Maximum"/>
    </chart-grid>
    <chart-legend legend-position="inset" legend-inset="top-left"/>
</c3chart>

Configure the Tooltip

When moving you cursor over the chart points, you get a tooltip with the line name and the value. If you have multiple lines by default you see all the values for the same horizontal item. Using this directive you can hide the tooltip, but you can also disable the grouping of values. That way you only get the value for the line your cursor is on.

    <chart-tooltip group-tooltip="false"/>

Configure the dynamic nature of chart sizes

By default the chart fits within the space you give it. Maybe you have a good reason to explicitly set the size of a chart. This can be done with the chart-size directive. It has two attributes, chart-width and chart-height

<chart-size chart-width="200" chart-height="200"/>

Configure the colors of the chart

With each chart-column you can specify a color. So why more color configuration. With this directive you can give a number of colors to use throughout the graph. That way you do not specify which color to take, but you do specify the colors to chose from.

<chart-colors color-pattern="green,blue,red,yellow"/>