chartjsで「Object literal may only specify known properties, and ‘tension’ does not exist in type ‘ChartDataSets’.」がでる時の対処法

2020.04.162023.04.22

chartjsを扱う際に「Object literal may only specify known properties, and ‘tension’ does not exist in type ‘ChartDataSets’.」というエラーが出た時の解決法を記載します。

エラー発生時のchartjsのバージョンは2系です。

エラーが発生する該当のソースコードは以下となります。

chartData = {
  labels: ['ラベル１','ラベル２','ラベル３'],
    datasets: [
      {
        type: "line",
        label: "ラベル名",
        data: [1,2,3],
        fill: false,
        tension: 0, // ここが誤り
        borderColor: "#00008b",
      }     
    ]
};

「tension」が誤りで以下のように「lineTension」とする必要があるようです。

chartData = {
  labels: ['ラベル１','ラベル２','ラベル３'],
    datasets: [
      {
        type: "line",
        label: "ラベル名",
        data: [1,2,3],
        fill: false,
        lineTension: 0, // ここを修正する
        borderColor: "#00008b",
      }     
    ]
};

以下公式ページを見ると以下のことがわかります。

公式ページからわかること

chartjsのバージョン2系：lineTensionというプロパティ名が正しい
chartjsのバージョン3系：tensionというプロパティ名が正しい
→2系では「lineTension」というプロパティがあったが、3系では無くなり、代わりに「tension」というプロパティが追加されたようです。
→2系では「lineTension」というプロパティを使う必要がある！

chartjs2系の公式ページ：