linechart setData & addData has abnormal operation.

[testdrive-profiling-master]

{
	const el = document.getElementById('chart');
	const data = {
		categories: ['0 ps'],
		series: [
			{
				name: 'Core',
				data: [0],
			}
		],
	};
	const options = {
		chart: { title: 'Core utilization in process', width: 1200, height: 400 },
		xAxis: {
			title: 'Time',
		},
		yAxis: {
			title: 'Percent (%)',
			scale: {min: 0, max: 100, stepSize:10},
			suffix: '%'
		},
		tooltip: {
			formatter: (value) => `${value}%`,
		},
		legend: {
			align: 'bottom',
		},
		series: {
			selectable: true,
		},
	};

	chart_core_utilization = toastui.Chart.lineChart({ el, data, options });
	chart_core_utilization.addData([10], '1 ns');
	chart_core_utilization.addData([15], '2 ns');
	chart_core_utilization.addData([25], '3 ns');
	chart_core_utilization.addData([45], '4 ns');
	chart_core_utilization.addData([70], '5 ns');
}

When I run the codes above, It does not shown the 'Core' line.
But when hovering the mouse over a point, a tooltip box is visible..

Strangely, when I click the checkbox twice, it shows up again like below.

And then, before using the addData function, if data is set again with the setData function, it will not operate normally as shown in the figure below.

        ......
	chart_core_utilization = toastui.Chart.lineChart({ el, data, options });
        chart_core_utilization.setData(data);    // <<==================== abnormal
	chart_core_utilization.addData([10], '1 ns');
	chart_core_utilization.addData([15], '2 ns');
	chart_core_utilization.addData([25], '3 ns');
	chart_core_utilization.addData([45], '4 ns');
	chart_core_utilization.addData([70], '5 ns');

no data, no x axis labels.

[adityachouh]

Use const instead of let for the chart_core_utilization variable, as it is not reassigned.