How to use tui-chart - 10 common examples

},
    theme: 'theme5'
};

tuiChart.registerTheme('theme5', {
    series: {
        area: {
            colors: ['#ffb840']
        },
        line: {
            colors: ['#785fff']
        }
    }
});

const lineAreaComboChart = tuiChart.comboChart(elLineAreaCombo, lineAreaRowData, lineAreaComboOptions);
console.group('LineAreaComboChart');
console.log(lineAreaComboChart);
console.log('chartType: ', lineAreaComboChart.chartType);
console.log('chartTypes: ', lineAreaComboChart.chartTypes);
console.log('className : ', lineAreaComboChart.className);
console.log('getCheckedLegend : ', lineAreaComboChart.getCheckedLegend());
console.groupEnd();

// LineScatterComboChart
const elLineScatterCombo = document.querySelector('.section[data-section="chart"] .lineScatterCombo');

const theme6 = {
    series: {
        scatter: {
            colors: ['#ffb840']
        },

yAxis: {
        title: 'Percentage (%)'
    },
    xAxis: {
        title: 'Temperature (C)'
    },
    series: {
        line: {
            spline: true
        }
    }
};

(lineScatterOptions as any).theme = 'theme6';

const lineScatterChart = tuiChart.comboChart(elLineScatterCombo, lineScatterData, lineScatterOptions);
console.group('LineScatterComboChart');
console.log(lineScatterChart);
console.log('chartType: ', lineScatterChart.chartType);
console.log('chartTypes: ', lineScatterChart.chartTypes);
console.log('className : ', lineScatterChart.className);
console.log('getCheckedLegend : ', lineScatterChart.getCheckedLegend());
console.groupEnd();

// PieDonutComboChart
const elPieDonutCombo = document.querySelector('.section[data-section="chart"] .pieDonutCombo');

const data2 = {
    categories: ['Browser'],
    seriesAlias: {
        pie1: 'pie',
        pie2: 'pie'

// LineScatterComboChart
const elLineScatterCombo = document.querySelector('.section[data-section="chart"] .lineScatterCombo');

const theme6 = {
    series: {
        scatter: {
            colors: ['#ffb840']
        },
        line: {
            colors: ['#785fff']
        }
    }
};

tuiChart.registerTheme('theme6', theme6);

const lineScatterData = {
    series: {
        scatter: [
            {
                name: 'Efficiency',
                data: [
                    { x: 10, y: 20 },
                    { x: 14, y: 30 },
                    { x: 18, y: 10 },
                    { x: 20, y: 30 },
                    { x: 24, y: 15 },
                    { x: 25, y: 25 },
                    { x: 26, y: 5 },
                    { x: 30, y: 35 },
                    { x: 34, y: 15 },

showLabel: this.props.showChartLabel
      },
      tooltip: {
        suffix: "%"
      },
      legend: {
        align: this.props.legendAlignment
      }
    };
    var theme = this.props.chartThemeConfig;
    // tui.chart.registerTheme('newTheme', theme);
    // For apply theme
    tui.registerTheme("myTheme", theme);
    options.theme = "myTheme";

    tui.pieChart(container, data, options);
  }

pointOnColumn: true
    },
    xAxis: {
        title: 'Month',
        tickInterval: 'auto'
    },
    series: {
        zoomable: true
    },
    tooltip: {
        suffix: 'kWh'
    },
    theme: 'theme5'
};

tuiChart.registerTheme('theme5', {
    series: {
        area: {
            colors: ['#ffb840']
        },
        line: {
            colors: ['#785fff']
        }
    }
});

const lineAreaComboChart = tuiChart.comboChart(elLineAreaCombo, lineAreaRowData, lineAreaComboOptions);
console.group('LineAreaComboChart');
console.log(lineAreaComboChart);
console.log('chartType: ', lineAreaComboChart.chartType);
console.log('chartTypes: ', lineAreaComboChart.chartTypes);
console.log('className : ', lineAreaComboChart.className);

xAxis: {
        title: 'Month'
    },
    series: {
        line: {
            showDot: true
        }
    },
    tooltip: {
        grouped: true,
        suffix: '°C'
    }
};


const columnNLineChart = tuiChart.comboChart(elColumnLineCombo, data, columnAndLineOptions);
console.group('ColumnLineChart');
console.log(columnNLineChart);
console.log('chartType: ', columnNLineChart.chartType);
console.log('chartTypes: ', columnNLineChart.chartTypes);
console.log('className : ', columnNLineChart.className);
console.log('yAxisOptions : ', columnNLineChart.yAxisOptions);
console.log('getCheckedLegend : ', columnNLineChart.getCheckedLegend());
console.groupEnd();

columnNLineChart.addPlotBand({
    range: [['Aug', 'Sep']],
    color: '#48a0ff',
    opacity: 0.15
});
columnNLineChart.addPlotLine({
    value: 'Sep',

pie2: {
            radiusRange: ['70%', '100%'],
            labelAlign: 'outer',
            showLegend: true
        }
    },
    legend: {
        visible: true
    },
    tooltip: {
        suffix: '%'
    },
    theme: 'theme3'
};

const pieNDonutChart = tuiChart.comboChart(elPieDonutCombo, data2, pieNDonutOptions);
console.group('PieDonutComboChart');
console.log(pieNDonutChart);
console.log('chartType: ', pieNDonutChart.chartType);
console.log('chartTypes: ', pieNDonutChart.chartTypes);
console.log('className : ', pieNDonutChart.className);
console.log('getCheckedLegend : ', pieNDonutChart.getCheckedLegend());
console.groupEnd();

const mapOptions = {
    chart: {
        width: 900,
        height: 700,
        title: 'Population density of World (per ㎢)',
        format: '0.00'
    },
    map: 'world',
    legend: {
        align: 'bottom'
    },
    theme: 'theme4'
};

const mapChart = tuiChart.mapChart(elMap, data, mapOptions);
mapChart.chartType;
mapChart.className;

mapChart.on('load', () => {
    mapChart.addData('Jan', [2000, 4000, 6000, 8000]);
});
mapChart.resetTooltipAlign();
mapChart.resetTooltipOffset();
mapChart.resetTooltipPosition();
mapChart.resize({
    width: 500,
    height: 400,
});
mapChart.setTooltipAlign('right bottom');
mapChart.setTooltipOffset({
    x: 50,

import tuiChart from 'tui-chart';

tuiChart.registerMap('newMap', [
    {
        code: 'KR',
        name: 'South Korea',
        path: 'M835.13,346.53L837.55,350.71...',
        labelCoordinate: {
          x: 0.6,
          y: 0.7
        }
    }
]);

const elMap = document.querySelector('.section[data-section="chart"] .map');

const data = {
    series: [
        {

const Story = () => {
    if (theme === themeOptions.myTheme) {
      TuiChart.registerTheme('myTheme', myTheme);
      options.theme = 'myTheme';
    }

    return ;
  };