chart.js　縦折れ線グラフ

chart.jsで縦の折れ線グラフにしたいです

イメージとしては

javascript
1<script>
2var barChartData = {
3			labels:["4月","5月","6月","7月","8月","9月","10月","11月","12月","1月","2月","3月"],
4 datasets : [
5	
6	{
7			label: '',
8			type: "line",
9			data: [10,20,30,40,50,60],
10			borderColor: "rgb(154, 162, 235)",
11			yAxisID: "y-axis-1",
12			lineTension: 0,
13			fill: false,
14		},
15]
16}
17		var ctx = document.getElementById("chart").getContext("2d");
18		window.myBar = new Chart(ctx, {
19			type: 'bar',
20			data: barChartData,
21			options: {
22          title: {
23            display: true,
24            text: "",
25			position: "",
26          },
27		  legend: { 
28			   position: "bottom", 
29			   labels: { 
30				   fontSize: 14,
31				   fontColor: "red"
32			   }
33		   },
34          tooltips: {
35            mode: 'label'
36          },
37          responsive: true,
38          scales: {
39            xAxes: [{
40              stacked: true,
41}],
42            yAxes: [{				
43			scaleLabel: { 
44			 display: true
45			},
46              stacked: true,
47              }
48            },
49		gridLines: { // このオプションを追加
50                drawOnChartArea: false, 
51            },
52        }]
53          }
54        }
55});
56</script>

行動規範の内容に同意します

回答1件

ベストアンサー

こんばんは。
Chart.jsでは縦の折れ線グラフはできないようですが、scatterでそれっぽく見せることは可能です。
例）

javascript
1var chart = new Chart(ctx, {
2  type: 'scatter',
3  data: {
4    datasets: [{
5      data: [
6        { x: 1, y: 8 },
7        { x: 2, y: 7 },
8        { x: 1, y: 6 },
9        { x: 3, y: 5 }
10      ],
11      fill: false,
12      showLine: true
13    }]
14  }
15});