JSFiddle - React, Tailwind, and code Playground

by 0o0o

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<!-- charts/line.md#dataset-property -->
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>

CSS

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

JavaScript

// charts/line.md#dataset-property
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["A", "B", "C", "D", "E", "F", "G"],
    datasets: [{
      label: 'データセットラベル',
      xAxisID: 'x軸その1', // 使用するx軸のID。多軸の場合に指定。
      yAxisID: 'y軸その1', // 使用するy軸のID。多軸の場合に指定。

      data: [12, 19, 3, , 5, 2, 3], // データ列

      backgroundColor: '#ffddcc', // 線の下の塗りつぶし色
      borderColor: '#ff9966', // 線の色
      borderWidth: 2, //線の幅

      borderDash: [0], // ダッシュ線のスタイル。[5, 3]など。
      borderDashOffset: 0, // ダッシュ線のオフセット
      borderCapStyle: 'butt', // 線の端の形状。'butt', 'round', or 'square'
      borderJoinStyle: 'bevel', //線の結合スタイル。'bevel', 'round', or 'miter'

      cubicInterpolationMode: 'default', // キュービック補間モード。'default', or 'monotone'
      fill: 'start', // 塗りつぶしモード
      lineTension: 0.3, // 線のベジェ曲線の張力

      pointBackgroundColor: '#4444cc', //点の塗りつぶしの色
      pointBorderColor: '#8888ff', // 点の境界線の色
      pointBorderWidth: 3, //点の境界線の幅
      pointRadius: 5, // 点の形状の半径
      pointStyle: 'circle', //点のスタイル

      pointHitRadius: 10, // マウスオーバー検出のために点半径に追加される半径(ピクセル単位)。
      pointHoverBackgroundColor: '#44cc44', // マウスオーバー時の点の背景色。
      pointHoverBorderColor: '#88ff88', // マウスオーバー時の点の境界線の色。
      pointHoverBorderWidth: 3, //マウスオーバー時の点の半径。

      showLine: true, // 線を表示する
      spanGaps: true, // データがない点にも線を引く
      steppedLine: false, // 階段グラフ
    }]
  },
  options: {

    scales: {
      yAxes: [{
        id: 'y軸その1', // 軸ID
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        id: 'x軸その1', // 軸ID
      }]
    }
  }
});