chart.js:縦のラインを全部非表示にする

harada 18views 更新:2017年6月13日

Chart.jsに以下のオプションを設定することで、縦のメモリ、始まりの縦線を含めてすべて非表示にできます。

options: {
      scales: {
        xAxes: [{
          display: true,
          stacked: false,
          gridLines: {
            display: false
          }
        }],
        yAxes: [{
          gridLines: {
            drawBorder: false
          }
        }]
      }
    }

表示サンプル用コード

<canvas id="chart" width="400" height="250"></canvas>
<script>
var ctx = document.getElementById("chart");
  var data = {
    labels: [1,2,3,4,5],
    datasets: [
      {
        label: "サンプル",
        fill: false,
        lineTension: 0.1,
        backgroundColor: "rgba(255,255,255,0)",
        borderColor: "#c2185b",
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: "#c2185b",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "#c2185b",
        pointHoverBorderColor: "#c2185b",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        data: [163,170,150,157,163],
        spanGaps: false
      }
    ]
  };
  var myChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
      scales: {
        xAxes: [{
          display: true,
          stacked: false,
          gridLines: {
            display: false
          }
        }],
        yAxes: [{
          gridLines: {
            drawBorder: false
          }
        }]
      }
    }
  });
</script>

参考:【コピペOK】Chart.jsで手軽にブログにグラフを埋め込もう
How to remove the line/rule of an axis in Chart.js?

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません