<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<!-- Ignite UI Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2022.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2022.1/latest/css/structure/infragistics.css" rel="stylesheet" />

<!--CSS file specific for chart styling -->
<link href="http://cdn-na.infragistics.com/igniteui/2022.1/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet" />

<!-- Ignite UI Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2022.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2022.1/latest/js/infragistics.dv.js"></script>

<div id="chart"></div>
<div id="legend"></div>
// データ
var prefData = [
  { "prefecture": "滋賀県", "score2017": 70, "score2018": 90 },
  { "prefecture": "京都府", "score2017": 125, "score2018": 150 },
  { "prefecture": "大阪府", "score2017": 110, "score2018": 75 },
  { "prefecture": "奈良県", "score2017": 140, "score2018": 150 }
];
// igDataChart
$("#chart").igDataChart({
  width: "600px",
  height: "350px",
  dataSource: prefData,//データの指定
  title: "調査結果",
  legend: { element: "legend" }, // 凡例
  axes: [
    // X軸、横軸
    {
      name: "prefectureAxis",
      type: "categoryX",
      label: "prefecture",
      title: "府県"
    },
    // Y軸、縦軸
    {
      name: "scoreAxis",
      type: "numericY",
      minimumValue: 0,
      maximumValue: 180,
      title: "スコア"
    }
  ],
  series: [
    {
      name: "score2017",
      type: "line",
      xAxis: "prefectureAxis",
      yAxis: "scoreAxis",
      valueMemberPath: "score2017",
      title: "score2017",
      thickness: 5
    },
    {
      name: "score2018",
      type: "line",
      xAxis: "prefectureAxis",
      yAxis: "scoreAxis",
      valueMemberPath: "score2018",
      title: "score2018"
    }
  ],
  seriesMouseLeftButtonDown: function (evt, ui) {
    var newThickness = ui.series.thickness === 5 ? 2 : 5;
    $('#' + evt.target.id).igDataChart("option", "series", 
      [{
        name: ui.series.name,
        thickness: newThickness,
      }]
    );
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.