ColumnLine colorByCategories does not work if color is not specified if initial render has no category

[nicofrand]

Hi, and thanks for this great project!

Describe the bug

The documentation states that setting colorByCategories to true should create columns with different colors.
The documentation does not state that a color parameter is required (https://github.com/nhn/tui.chart/blob/main/apps/chart/src/component/boxSeries.ts#L428).

This throws an error:

Uncaught TypeError: can't access property "toLowerCase", colorName is undefined
    colorNameToHex https://uicdn.toast.com/chart/latest/toastui-chart.js:8356
    getRGBA https://uicdn.toast.com/chart/latest/toastui-chart.js:8384
    getSeriesColor https://uicdn.toast.com/chart/latest/toastui-chart.js:30888
    renderSeriesModel https://uicdn.toast.com/chart/latest/toastui-chart.js:30453
    renderSeriesModel https://uicdn.toast.com/chart/latest/toastui-chart.js:30448
    renderSeriesModel https://uicdn.toast.com/chart/latest/toastui-chart.js:30439
    render https://uicdn.toast.com/chart/latest/toastui-chart.js:30347
    proc https://uicdn.toast.com/chart/latest/toastui-chart.js:16642
    timer https://uicdn.toast.com/chart/latest/toastui-chart.js:7437
    setTimeout handler*debounced https://uicdn.toast.com/chart/latest/toastui-chart.js:7436
    add https://uicdn.toast.com/chart/latest/toastui-chart.js:16650
    observer https://uicdn.toast.com/chart/latest/toastui-chart.js:7660
    invokeObs https://uicdn.toast.com/chart/latest/toastui-chart.js:7809
    invokeObs https://uicdn.toast.com/chart/latest/toastui-chart.js:7808
    set https://uicdn.toast.com/chart/latest/toastui-chart.js:7754
    store_extend https://uicdn.toast.com/chart/latest/toastui-chart.js:8049
    initLegendState https://uicdn.toast.com/chart/latest/toastui-chart.js:16054
    dispatch https://uicdn.toast.com/chart/latest/toastui-chart.js:7964
    setData https://uicdn.toast.com/chart/latest/toastui-chart.js:14234
    dispatch https://uicdn.toast.com/chart/latest/toastui-chart.js:7964
    setData https://uicdn.toast.com/chart/latest/toastui-chart.js:33326
    <anonymous> pen.js:105

To Reproduce

See https://codepen.io/nicofrand/pen/PoQxPgm

Steps to reproduce the behavior:

1. Create a chart with no data at first (no categories nor series yet)
2. Later, call chart.setData with colorByCategories set to true in the column serie. (code below)
3. Open the browser console and see the stack trace:

Code:

      const el = document.getElementById('chart-area');
      const emptyData = {
        categories: [],
        series: {
          column: [],
          line: [],
        }
      };
      const data = {
        categories: ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
        series: {
          column: [
            {
              name: 'Temp',
              data: [11.3, 17.0, 21.0, 24.4, 25.2, 20.4, 13.9],
              colorByCategories: true
            }            
          ],
          line: [
            {
              name: 'Average',
              data: [11, 15.1, 17.8, 19.7, 19.5, 16.5, 12.3],
            },
          ],
        },
      };
      const options = {
        chart: { width: 900, height: 500 },
          usageStatistics: false,

			legend: {
				visible: false
			},

			exportMenu: {
				visible: false
			},
        xAxis: {
				pointOnColumn: true
			},

			yAxis: [
				{
					title: "Temp °",
					chartType: "line"
				},

				{
					title: "Average",
					chartType: "column"
				}
			],

			series: {
				line: {
					showDot: true
				}
			},
      };

      const chart = toastui.Chart.columnLineChart({ el, data: emptyData, options });
      chart.setData(data);
    

Expected behavior

The columns are drawn, each with a different color.

Screenshots

Desktop (please complete the following information):

• OS: Kubuntu
• Browser Firefox
• Version 103, 102, ...

[jwlee1108]

@nicofrand Sorry for the late reply. I was able to reproduce this issue. I'll check it.

[stale]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[nicofrand]

Just adding a comment so that the stale bot does not close it automatically.

[stale]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[nicofrand]

Hi,

this is still active!