API

<c3-chart ...>
  <c3-data ...>
    <c3-data-[singular] ... />
  </c3-data>
  <c3-axis ... />
  <c3-[x,y,y2]-axis ...>
    <c3-tick ... />
  </c3-[x,y,y2]-axis>
  <c3-[x,y]-grid ... />
  <c3-regions ...>
    <c3-region ...>
  </c3-regions>
  <c3-legend ... />
  <c3-tooltip ... />
  <c3-subchart ... />
  <c3-zoom ... />
  <c3-point ... />
  <c3-line ... />
  <c3-area ... />
  <c3-bar ... />
  <c3-pie ...>
    <c3-label ... />
  </c3-pie>
  <c3-donut ...>
    <c3-label ... />
  </c3-pie>
  <c3-gauge ...>
    <c3-label ... />
  </c3-gauge>
</c3-chart>

All sub-components have their attributes and events from http://c3js.org/reference.html available in the form of:

<c3-[component] attribute="{{value}}" event="{eventHandler}">

Dot attribute names are available with dashes instead of dots (e.g. <c3-chart>'s size.width attribute is available as <c3-chart size-width="{{width}}"). There are three exceptions, documented below:

• <c3-region>
• <c3-tick>
• <c3-label>

Example: c3-chart

<c3-chart> has the following attributes and usage. Any and all attributes are optional.

• bindto: <c3-chart bindto="{{bindTo}}">
• size.width: <c3-chart size-width="{{width}}">
• size.height: <c3-chart size-height="{{height}}">
• padding.top: <c3-chart padding-top="{{paddingTop}}">
• padding.right: <c3-chart padding-right="{{paddingRight}}">
• padding.bottom: <c3-chart padding-bottom="{{paddingBottom}}">
• padding.left: <c3-chart padding-left="{{paddingLeft}}">
• color.pattern: <c3-chart color-pattern="{{colorPattern}}">
• color.threshold: <c3-chart color-threshold="{{colorThreshold}}">
• interaction.enabled: <c3-chart interaction-enabled="{{interactionEnabled}}">
• transition.duration: <c3-chart transition-duration="{{transitionDuration}}">

And the following events:

• oninit: <c3-chart oninit="{onInitHandler}">
• onrendered: <c3-chart onrendered="{onRenderedHandler}">
• onmouseover: <c3-chart onmouseover="{onMouseoverHandler}">
• onmouseout: <c3-chart onmouseout="{onMouseoutHandler}">
• onresize: <c3-chart onresize="{onResizeHandler}">
• onresized: <c3-chart onresized="{onResizedHandler}">

Edge Cases

Data Plurals

Data loading is covered more specifically in https://github.com/bitovi-components/c3-chart/wiki/Loading-Data. There are several <c3-data> attributes that are defined as plurals:

• data.rows
• data.columns
• data.keys
• data.xs
• data.names
• data.classes
• data.groups
• data.types
• data.regions
• data.colors

Because of the complex nature of the data passed to these attributes, they are also available as separate singular sub-components of <c3-data> in the form of <c3-data-[singular] ... />. Using data.types as an example. For a normal attribute, these would be set in the following way:

<c3-chart>
  <c3-data types="{{types}}" />
</c3-chart>

where types is a complex object that looks like:

{
  data1: 'bar'
  data2: 'spline'
}

When composing a chart, these values may not be easily grouped together, so a <c3-data-type> component is exposed to make the chart more composable:

<c3-chart>
  <c3-data>
    <c3-data-type for="{{data1Key}}" value="{{data1Type}}" />
    <c3-data-type for="{{data2Key}}" value="{{data2Type}}" />
  </c3-data>
</c3-chart>

For all plural components where an object key is a reference to a data series, the for attribute is used to define the key and the value attribute is used to define its value.

Regions

Regions and Data.Regions both have a sub-component to define singular regions, instead of one pluralized component. Therefore, regions may be defined in two ways:

Option 1:

<c3-chart>
  <c3-regions value="{{regions}} />
</c3-chart>

where {{regions}} is an array of complex objects in the form of:

[
  {axis: 'x', start: 1, end: 4, class: 'x-region-1-4'},
  {axis: 'y2', start: 1, end: 4, class: 'y2-region-1-4'},
]

Option 2:

<c3-chart>
  <c3-region for="x" start="1" end="4" class="x-region-1-4" />
  <c3-region for="y2" start="1" end="4" class="y2-region-1-4" />
</c3-chart>

For data.regions, the format is very similar:

Option 1:

<c3-chart>
  <c3-data regions="{{regions}}">
</c3-chart>

where {{regions}} is a complex object in the form of:

{
  data1: [{'start':1, 'end':2, 'style':'dashed'}, {'start':3}],
  data2: [{'end':3}]
}

Option 2:

<c3-chart>
  <c3-data>
    <c3-data-region for="{{data1Key}}" start="1" end="2" style="dashed" />
    <c3-data-region for="{{data1Key}}" start="3" />
    <c3-data-region for="{{data1Key}}" end="3" />
  </c3-data>
</c3-chart>

X, Y, and Y2 Axes

There are three axis sub-components for defining X, Y, and Y2 axes instead of one more complex component. These components can be composed in the form of <c3-[x,y,y2]-axis ... /> (e.g. the Y axis is composed as <c3-y-axis ... />) and has all attributes in the documentation available as attributes (e.g. the axis.y.show attribute is available as <c3-y-axis show="{{showYAxis}}" />).

If you don't want to use these more complex components, you can also use the <c3-axis> component and specify the attribute name in dashed form (e.g. <c3-axis y-show="{{showYAxis}}" />).

Ticks (<c3-tick>)

Because ticks have several attributes, a separate component is available for defining them. So, tick attributes can be added in two ways:

Option 1:

<c3-chart>
  <c3-[x,y,y2]-axis tick-fit="{{tickFit}}" />
</c3-chart>

Option 2:

<c3-chart>
  <c3-[x,y,y2]-axis>
    <c3-tick fit="{{tickFit}}" />
  </c3-[x,y,y2]-axis>
</c3-chart>

Labels (<c3-label>)

Similar to ticks, because labels have several attributes, a separate component is available for defining them. So, labels attributes can be added to pie, donut, and gauge type charts in two ways:

Option 1:

<c3-chart>
  <c3-pie label-show="{{showPieLabel}}" />
</c3-chart>

Option 2:

<c3-chart>
  <c3-pie>
    <c3-label show="{{showPieLabel}}" />
  </c3-pie>
</c3-chart>