C3Js Row data example

An example of how to use c3js row data

HTML

<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css">
<div id="chart"></div>

JavaScript

var categoryPositioningChart = c3.generate({
  bindto: '#chart',
  point: {
              r: function (d) {
                  return 15;
              }
          },
  data: {
    xs: {
      'Electronics & Office': 'Electronics_x',
      'Grocery': 'Grocery_x',
      'Fresh Produce': 'Fresh_x',
      'Health & Wellness': 'Health_x',
      'Clothing & Shoes': 'Clothing_x',
      'Sports & Outdoor': 'Sports_x',
      'Gifts & Personal': 'Gifts_x',
      'Baby & Toddler': 'Baby_x',
      'Auto & Tyres': 'Auto_x',
      'Home Improvement': 'Home_x'
    },
    columns: [
      [
        "Electronics_x", 3200
      ],
      [
        "Grocery_x", 2500
      ],
      [
        "Electronics & Office", 1800
      ],
      [
        "Grocery", 2500
      ],
      [
        "Fresh_x", 2975
      ],
      [
        "Health_x", 4500
      ],
      [
        "Fresh Produce", 1500
      ],
      [
        "Health & Wellness", 8050
      ],
      [
        "Clothing_x", 3105
      ],
      [
        "Sports_x", 500
      ],
      [
        "Clothing & Shoes", 1050
      ],
      [
        "Sports & Outdoor", 2200
      ],
      [
        "Gifts_x", 4500
      ],
      [
        "Baby_x", 3050
      ],
      [
        "Gifts & Personal", 1450
      ],
      [
        "Baby & Toddler", 2405
      ],
      [
        "Auto_x", 3050
      ],
      [
        "Home_x", 3850
      ],
      [
        "Auto & Tyres", 1800
      ],
      [
        "Home Improvement", 2200
      ]
    ],
    type: 'scatter'
  },
  axis: {
    x: {
      label: 'Billing Margin %',
      tick: {
        rotate: 45,
        fit: false,
        multiline: false
      },
    },
    y: {
      label: 'Net Sales'
    }
  },
  legend: {
    position: 'bottom',
    inset: {
      anchor: 'bottom-right',
      x: 20,
      y: 10,
      step: 2
    }
  }
});

categoryPositioningChart.axis.range({
  min: {
    x: 1000,
    y: 500,
    y2: 500,
    x2: 1000
  },
  max: {
    x: 8000,
    x2: 8000,
    y: 4500,
    y2:...