Loading Data

Rows

Reference: http://c3js.org/reference.html#data-rows

Option 1:

<c3-chart>
  <c3-data rows="[
    ['data1', 'data2', 'data3'],
    [90, 120, 300],
    [40, 160, 240],
    [50, 200, 290],
    [120, 160, 230],
    [80, 130, 300],
    [90, 220, 320],
  ]" />
</c3-chart>

Option 2:

<c3-chart>
  <c3-data>
    <c3-data-row value="['data1', 'data2', 'data3']" />
    <c3-data-row value="[90, 120, 300]" />
    <c3-data-row value="[40, 160, 240]" />
    <c3-data-row value="[50, 200, 290]" />
    <c3-data-row value="[120, 160, 230]" />
    <c3-data-row value="[80, 130, 300]" />
    <c3-data-row value="[90, 220, 320]" />
  </c3-data>
</c3-chart>

Columns:

Reference: http://c3js.org/reference.html#data-columns

Option 1:

<c3-chart>
  <c3-data columns="[
    ['data1', 30, 20, 50, 40, 60, 50],
    ['data2', 200, 130, 90, 240, 130, 220],
    ['data3', 300, 200, 160, 400, 250, 250]
  ]" />
</c3-chart>

Option 2:

<c3-chart>
  <c3-data>
    <c3-data-column value="['data1', 30, 20, 50, 40, 60, 50]" />
    <c3-data-column value="['data2', 200, 130, 90, 240, 130, 220]" />
    <c3-data-column value="['data3', 300, 200, 160, 400, 250, 250]" />
  </c3-data>
</c3-chart>

Option 3:

<c3-chart>
  <c3-data>
    <c3-data-column key="data1" value="[30, 20, 50, 40, 60, 50]" />
    <c3-data-column key="data2" value="[200, 130, 90, 240, 130, 220]" />
    <c3-data-column key="data3" value="[300, 200, 160, 400, 250, 250]" />
  </c3-data>
</c3-chart>

URL

Reference: http://c3js.org/reference.html#data-url

<c3-chart>
  <c3-data url="/data/c3_test.csv" mime-type="csv" />
</c3-chart>

JSON

Reference: http://c3js.org/reference.html#data-json

Option 1:

<c3-chart>
  <c3-data json="[
      {name: 'www.site1.com', upload: 200, download: 200, total: 400},
      {name: 'www.site2.com', upload: 100, download: 300, total: 400},
      {name: 'www.site3.com', upload: 300, download: 200, total: 500},
      {name: 'www.site4.com', upload: 400, download: 100, total: 500},
    ]" keys="{x: 'name', value: ['upload', 'download']}" />
</c3-chart>

Option 2:

<c3-chart>
  <c3-data json="{}">
    <c3-data-key x="name" value="['upload', 'download']" />
  </c3-data>
</c3-chart>