Chart Containers proposal

This is currently a draft proposal.

c3-chart

<c3-chart
  type='line (spline, area, area-spline, step, area-step, scatter, bar)' // graph type - http://c3js.org/reference.html#data-type
  stacked // boolean if all data is stacked - http://c3js.org/reference.html#data-groups
  labels // show/hide data labels - http://c3js.org/reference.html#data-labels
</c3-chart>

Params to consider:

• width='100%'
• height='100%'
• padding=[]
• padding-[top,right,bottom,left]=‘’
• can-[onit, rendered,mouseover,mouseout,resize,resized]='': event hooks - http://c3js.org/reference.html#oninit
• data-rows=[]: load all data in row format at once - http://c3js.org/reference.html#data-rows
• data-columns=[]: load all data in column format at once - http://c3js.org/reference.html#data-rows
• label-format='': label formatter - http://c3js.org/reference.html#data-labels-format
• order=’': data ordering - http://c3js.org/reference.html#data-order
• no-interaction: disables graph interaction - http://c3js.org/reference.html#interaction-enabled

c3-[pie, donut, gauge]-chart

This would have params specific to this chart type. It would also make it clear that you cannot override the type attribute inside of a c3-series.

c3-pie-chart

<c3-pie-chart ...> ... </c3-pie-chart> Same sub-components as c3-chart. Would need to implement full pie API (http://c3js.org/reference.html#pie-label-show). Reference: http://c3js.org/samples/chart_pie.html

c3-donut-chart

<c3-donut-chart ...> ... </c3-pie-chart> Same sub-components as c3-chart. Would need to implement full donut API (http://c3js.org/reference.html#donut-label-show). Reference: http://c3js.org/samples/chart_donut.html

c3-gauge-chart

<c3-gauge-chart ...> ... </c3-gauge-chart> Same sub-components as c3-chart. Would need to implement full gauge API (http://c3js.org/reference.html#gauge-label-show). Reference: http://c3js.org/samples/chart_gauge.html