chart types line scatter combo

Line & Scatter Combo chart

• This section describes how to create line & scatter combo chart with options.
• You can refer to the Getting started for base installation of Toast UI Chart.

---

Data type

The data type of the line & scatter combo chart is one level deeper than the depth of basic data type. Features of this data type, you will need to enter the data for each chart type.

var rawData = {
    categories: ['cate1', 'cate2', 'cate3'],
    series: {
        Scatter: [
            {
                name: 'Legend1',
                data: [
                    {
                        x: 10,
                        y: 20
                    }, 
                    {
                        x: 25,
                        y: 10
                    }, 
                    {
                        x: 40,
                        y: 30
                    }
                ]
            }
        ],
        line: [
            {
                name: 'Legend2',
                data: [
                    {
                        x: 5,
                        y: 10
                    },
                    {
                        x: 15, 
                        y: 20
                    },
                    {
                        x: 40,
                        y: 60
                    }
                ]
            }
        ]
    }
};

---

Creating a basic chart

Example

var rawData = {
    //...
    series: {
        scatter: [
                {
                    name: 'Efficiency',
                    data: [
                        {x: 10, y: 20},
                        {x: 14, y: 30},
                        ...
                        {x: 90, y: 85}
                    ]
                }
            ],
        line: line: [
                {
                    name: 'Expenses',
                    data: [
                        {x: 15, y: 15},
                        {x: 30, y: 23},
                        ...
                        {x: 90, y: 82}
                    ]
                }
            ]
    }
};
//...
tui.chart.comboChart(container, rawData);

• Sample

---