igDataChart ラインチャートの太さを動的に変更する

igDataChart のラインチャートの太さを、クリックされたタイミングで動的に変更してみましょう。ラインチャートをクリックしたタイミングで発生する、seriesMouseLeftButtonDown イベントをハンドルします。イベントハンドラー内で、igDataChart のオプション経由でシリーズの thickness を指定します。

$("#chart").igDataChart({
  ...
  seriesMouseLeftButtonDown: function (evt, ui) {
    var newThickness = ui.series.thickness === 5 ? 2 : 5; // 太さの切り替え
    $('#' + evt.target.id).igDataChart("option", "series", 
      [{
        name: ui.series.name,
        thickness: newThickness,
      }]
    );
  }
});

実行結果

ラインチャートをクリックしたタイミングで、ラインチャートの太さが変わります。

seriesMouseLeftButtonDown イベント
https://jp.igniteui.com/help/api/2022.1/ui.igDataChart#events:seriesMouseLeftButtonDown