Chart JS V2.0 Line Chart Point Style

サンプルの内容

線の種類を変更して、点のスタイルを変更している。 また、凡例も点のスタイと一致させている。

Base からの主な修正点

変更点は

1. 線種の変更
2. 点の変更
3. 凡例の変更

の３点となる。

線種の変更

data.datasets.borderDash に配列で数値を渡すことで、任意の破線となる。 破線の説明はMDNを参照してください。

data: {
  datasets: [
    {
      borderDash: [ 5, 10],
    }
  ]
},

点の変更

data.datasets.pointStyle に文字列を設定することで変更が可能となる。 標準で選択できる点の種類は,

• circle
• triangle
• rect
• rectRot
• cross
• crossRot
• star
• line
• dash

ですが、Javascript の drawImage を使って表示することもできるようですが試していません。 また、各値は配列でも渡すことができます。

data: {
  datasets: [
    {
      pointStyle: 'star'
    }
  ]
},

凡例の変更

凡例はデフォルトで長方形ですが、options.legend.labels.usePointStyle を true にすることで点と一致する図形になります。 ただし、options.legend.labels.fontSize で凡例図形のサイズが決まるので適切に処理する必要があります。 また、options.legend.labels.boxSize も合わせることで表示が良くなります。

options: {
  legend: {
    labels: {
      fontSize: 20,
      boxWidth: 20,
      usePointStyle: true,
    }
},

おまけ

レスポンシブデザインにするため、options.responsive を true にしています。

全体

chartjs sample pointstyle