0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

vue-chartjs(chart.js)の凡例を任意の色にする

Posted at

 同じグループに所属するグラフのうちある1本だけ異なる色になるようにしたところ、単一のグループに複数の色を指定したせいか凡例の色が指定できない問題が発生した。
 対処するために凡例の色(スタイル)を直接指定したので、その対応方法をメモ。
options以下に……

        legend: {
          display: true,
          position: 'top',
          labels: {
            generateLabels: (data) => {
              const chartData = data.tooltip._data;
              return chartData.datasets.map(dataset => {
                return {
                  text: dataset.label,
                  fillStyle: dataset.index === 0 ? '#837EE8' : '#65AAF1',
                }
              })
            }
          }
        },

 通常はグラフの色がそのまま凡例の色になる? なのでグラフの色と異なる凡例の色を指定するために、直接上記のように色を指定して対応した。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?