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: 'bar',
      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, //線の幅
          //borderSkipped: 'top', // 除外する境界線。機能しません。

          hoverBackgroundColor: '#44cc44', // マウスオーバー時の点の背景色。
          hoverBorderColor: '#88ff88', // マウスオーバー時の点の境界線の色。
          hoverBorderWidth: 3, //マウスオーバー時の点の半径。

        }]
      },
      options: {
        elements: {
          rectangle: {
            borderSkipped: 'bottom' // 除外する境界線。
          }
        },
        scales: {
          yAxes: [{
            id: 'y軸その1', // 軸ID
            ticks: {
              beginAtZero: true // y = 0から描画する
            }
          }],

          xAxes: [{
            id: 'x軸その1', // 軸ID
            barPercentage: 0.9, // 棒幅のカテゴリ幅に対する比率
            categoryPercentage: 0.8, // カテゴリ幅のサンプル幅に対する比率
            //barThickness: 300, // 棒の幅 (px)
            maxBarThickness: 100, // 棒の幅の最大値 (px)
            gridLines: {
              offsetGridLines: true, // グリッド線をグリッド間隔の半分だけシフトする
            },
          }]
        }
      }
    });