Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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:

Create a chart with no data at first (no categories nor series yet)
Later, call chart.setData with colorByCategories set to true in the column serie. (code below)
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