How to use the tui-chart.comboChart function in tui-chart

To help you get started, we’ve selected a few tui-chart examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github nhn / tui.chart / test / types / comboChart.ts View on Github external
},
    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']
        },
github nhn / tui.chart / test / types / comboChart.ts View on Github external
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'
github nhn / tui.chart / test / types / comboChart.ts View on Github external
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',
github nhn / tui.chart / test / types / comboChart.ts View on Github external
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();