【chart.js】x軸(横軸)のラベルに間隔を空ける方法メモ

はじめに

今回初めてadminLTEというboostrap製の管理画面用のデザインテンプレートを使ったのですがかなりイイです。
情けない事に今までcssは1ミリもいじりたくないってタイプだったのですが、それなりの見た目の画面が用意できました

で、その中でchartjsというグラフが描画できるライブラリを使っていてこれも簡単にイイ感じの見た目のグラフが作れてよかったです

ちょっとだけ手間取ったのは
bootstrapの機能なのか
adminLTEの機能なのか
chartjsのような全くサードパーティ製のプラグインの機能なのか
が最初わからなくて、どんなキーワードで検索すればいいのか悩んだことくらいでした。これは慣れかもしれませんが・・・

やりたかったこと

こんな感じでx軸のラベルの間隔の空けたかったのがやりたいことでした。

最初はx軸を作るときに間隔を開けたい箇所には空文字を入れる形で試みたのですが
マウスでポイントをあわせたときに表示されるラベルにx軸のラベルも空白になってしまってこれを改善したかったです

実装

Chart.types.Line.extend({
  name: "LineAlt",
  initialize: function (data) {
    Chart.types.Line.prototype.initialize.apply(this, arguments);
    var xLabels = this.scale.xLabels
    xLabels.forEach(function (label, i) {
      if (i % 5 != 0)
      xLabels[i] = '';
    })
  }
});

stackoverflowに解決策があってこんな感じでできるみたいです。
javascriptのクラスってこんな感じでカスタマイズできるんですね・・・
これで解決でした

以上です