PrimeVue – Chart | 特定の点を強調表示する

手軽にそれっぽいUIを実現できるUIライブラリ「PrimeVue」のChartコンポーネントを使って線グラフを描画し、特定の値や点を動的に強調表示してみたいと思います。PrimeVueのChartコンポーネントはChart.jsをベースにしており公式ドキュメントを見てもそれほど細かいパラメータの説明がないため詳しくはChart.jsのドキュメントを確認する必要があります。

ChartコンポーネントはPrimeVueのドキュメントにある通りdataとoptionsを指定し、これに加えてグラフを再描画するときにコンポーネントにアクセスするためにref属性を付与しておきます。

<Chart type="line" :data="data" :options="options" ref="chart" />

あとはデータとオプションを設定しますが、動的に強調表示したり表示をいじくるにはオプションの方にコールバックメソッドを追加します。

// Chartコンポーネント
const chart = ref()

// データとオプションを設定する
onMounted(() => {
    data.value = setChartData();
    options .value = setChartOptions();
});

const data= ref();  // グラフのデータ
const options = ref();  // グラフのオプション
const highlight = ref();  // 強調表示したい点のインデックス

// なんらかのイベントで動的に強調表示する例
const onClick = (index) => {
    highlight.value = index
    chart.value.refresh()  // 強調表示を適用するにはグラフを強制的に再描画する必要がある
}
        
const setChartData = () => {
    return {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
            {
                label: 'First Dataset',
                data: [65, 59, 80, 81, 56, 55, 40],
            }
        ]
    };
};
const setChartOptions = () => {
    return {
        elements: {
          point: {
            // 選択されたインデックスの点を大きく強調表示する
            radius: (context) => context.dataIndex === highlight.value ? 20 : 5
          },
        }
    };
}

onClickイベントなどなんらかのイベントに応じて強調表示したいデータ配列のインデックスを指定してグラフを再描画しています。今回はradiusを指定して線グラフ上の点を大きく表示していますが、borderColorやborderWidthを指定することもできます。