<div id="parent">
  <div class="chart">
  </div>
</div>
#parent {
  width: 480px;
  height: 320px;
  margin-right: auto;
  margin-left: auto;
}

.chart {
  height: 100%;
}

path.mg-main-line {
  fill: none;
  opacity: 0.5;
  stroke-width: 10px;
}

.mg-histogram .axis text,
.mg-x-axis text,
.mg-y-axis text {
  font-weight: bold;
  font-size: 1.2rem;
}

.mg-line-legend text {
  font-weight: bold;
  font-size: 1.2rem;
}
var intakeKcals = [{date: new Date("2016/7/1"), value: 1400},
{date: new Date("2016/7/2"), value: 1400},
{date: new Date("2016/7/3"), value: 1500},
{date: new Date("2016/7/4"), value: 1200},
{date: new Date("2016/7/5"), value: 2500},
{date: new Date("2016/7/6"), value: 1300},
{date: new Date("2016/7/7"), value: 1600},
];
var usedKcals = [{date: new Date("2016/7/1"), value: 1600},
{date: new Date("2016/7/2"), value: 1800},
{date: new Date("2016/7/3"), value: 1900},
{date: new Date("2016/7/4"), value: 2000},
{date: new Date("2016/7/5"), value: 1700},
{date: new Date("2016/7/6"), value: 1900},
{date: new Date("2016/7/7"), value: 1900},
];
MG.data_graphic({
  data: [intakeKcals, usedKcals],
  width: 480,
  height: 320,
  left: 60,
  right: 80,
  top: 20,
  bottom: 60,
  target: ".chart",
  x_accessor: 'date',
  y_accessor: 'value',
  legend: ['摂取kcal', '消費kcal'],
  colors: ['#e80703', '#909090'],
  //show_secondary_x_label: false,
  //show_confidence_band: ['l', 'u'],
  //x_extended_ticks: true,
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.9.0/metricsgraphics.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js
  2. https://code.jquery.com/jquery-2.2.4.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.9.0/metricsgraphics.min.js