C3Js Row data example

An example of how to use c3js row data

by Sourabh Tewari

HTML

<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<div id="chart" width="2024 px" height=""></div>

CSS

#chart {
  /*  height: 98%;
    min-height: 98%; */
}

.domain{
   stroke-dasharray: 5,5;
  
}
.arrow {
  stroke-width: 5;
  stroke: #000;
  stroke-dasharray: 5, 5;
}

.mvmt {
  border-bottom: 3px solid #fc0;
}

.c3-xgrid-line text {
  font-weight: bold;
}

.boldText {
  font-weight: bolder;
}

.lightText {
  font-weight: normal;
}

.c3-axis-y .tick {
  display: none;
}

.c3-axis .c3-axis-y .tick .line {
  /* stroke: #fff; */
}

.c3 text {
  fill: #292929 !important;
}

.c3 svg {
  font: 14px calibri;
}

.c3 {
  font: 14px calibri;
}

.c3-circle {
  /*   stroke-width: 2px;
    stroke: #fff; */
}

/* .c3-chart-lines .c3-circles .c3-circle {
  display: none;
} */

.c3-chart-texts .c3-chart-text:nth-of-type(1) .c3-texts .c3-text {
  transform: translate(-25px, 0);
}

.c3-line {
  stroke-width: 3px;
}

.dataLabel {
  color: #fff;
  text-anchor: middle;
  font: 14px Calibri;
  text-align: center;
  line-height: 0.2;
}

.dataLabelBlack {
  color: #000000;
  text-anchor: middle;
  font: 14px Calibri;
  text-align: center;
  line-height: 0.2;
}

.bpsLabel {
  color: #fff;
  font-size: x-small;
}

.bpsLabelGreen {
  color: #000;
  font-size: x-small;
}

JavaScript

var stuff = [{
    "year": 2015,
    "month": 12,
    "s1": 0.38,
    "s2": 100,
    "s3": 22.2,
    "s4": 61,
    "s5": -7,
  },
  {
    "year": 2016,
    "month": 1,
    "s1": 0.39,
    "s2": 101,
    "s3": 22.12,
    "s4": 62,
    "s5": -6.0,
  },
  {
    "year": 2016,
    "month": 2,
    "s1": 0.43,
    "s2": 102,
    "s3": 22.11,
    "s4": 65,
    "s5": -5.7,
  },
  {
    "year": 2016,
    "month": 3,
    "s1": 0.40,
    "s2": 103,
    "s3": 22.07,
    "s4": 63,
    "s5": -5.3,
  },
  {
    "year": 2016,
    "month": 4,
    "s1": 0.39,
    "s2": 104,
    "s3": 22.04,
    "s4": 61,
    "s5": -7.0,
  },
  {
    "year": 2016,
    "month": 5,
    "s1": 0.38,
    "s2": 105,
    "s3": 22.2,
    "s4": 56,
    "s5": -11.3,
  },
  {
    "year": 2016,
    "month": 6,
    "s1": 0.38,
    "s2": 106,
    "s3": 22.05,
    "s4": 56,
    "s5": -12.8,
  },
  {
    "year": 2016,
    "month": 7,
    "s1": 0.37,
    "s2": 102,
    "s3": 22.7,
    "s4": 58,
    "s5": -9.7,
  },
  {
    "year": 2016,
    "month": 8,
    "s1": 0.37,
    "s2": 105,
    "s3": 21.20,
    "s4": 53,
    "s5": -6.2,
  },
  {
    "year": 2016,
    "month": 9,
    "s1": 0.35,
    "s2": 108,
    "s3": 20.52,
    "s4": 64,
    "s5": -5.3,
  },
  {
    "year": 2016,
    "month": 10,
    "s1": 0.37,
    "s2": 103,
    "s3": 20.92,
    "s4": 62,
    "s5": -3.3,
  },
  {
    "year": 2016,
    "month": 11,
    "s1": 0.36,
    "s2": 107,
    "s3": 21.11,
    "s4": 51,
    "s5": -5.7,
  },
  {
    "year": 2016,
    "month": 12,
    "s1": 0.37,
    "s2": 114,
    "s3": 22.08,
    "s4": 56,
    "s5": -8.3,
  },
  {
    "year": 2017,
    "month": 1,
    "s1": 0.35,
    "s2": 103,
    "s3": 22.07,
    "s4": 56,
    "s5": -7.2,
  },
  {
    "year": 2017,
    "month": 2,
    "s1": 0.36,
    "s2": 108,
    "s3": 22.2,
    "s4": 63,
    "s5": -9.0,
  },
  {
    "year": 2017,
    "month": 3,
    "s1": 0.37,
    "s2": 96,
    "s3": 25.67,
    "s4": 62,
    "s5": -9.4,
  },
  {
    "year": 2017,
    "month": 4,
    "s1":...