chart types line,area

Line chart and area chart

• This section describes how to create line chart and area chart with options.
• You can refer to the Getting start for base installation of Toast UI Chart.

---

Data type

Line chart and area chart use the default data type.

var data = {
    categories: ['cate1', 'cate2', 'cate3'],
    series: [
        {
            name: 'Legend1',
            data: [20, 30, 50]
        },
        {
            name: 'Legend2',
            data: [40, 40, 60]
        },
        {
            name: 'Legend3',
            data: [60, 50, 10]
        },
        {
            name: 'Legend4',
            data: [80, 10, 70]
        }
    ]
};

Range data type

Range data type is used to represent the range of data. This type is available in the area chart.
If you follow this example, you can use range data.

var data = {
    categories: ['cate1', 'cate2', 'cate3'],
    series: [
        {
            name: 'Legend1',
            data: [[10, 20], [20, 30], [40, 60]]
        },
        //...
    ]
};

---

Creating a basic chart

Example

// line chart
tui.chart.lineChart(container, data);

// area chart
tui.chart.areaChart(container, data);

---

Creating a spline chart

You can create a spline chart by setting the series.spline option.

Example

//...
var options = {
      //...
    series: {
        spline: true
    }
};
tui.chart.lineChart(container, data, options);

• Sample

---

Creating a stacked area chart

You can create a stacked chart by setting the series.stacked option.
The stacked chart has two types, 'normal' and 'percent'.

Example

//...
var options = {
      //...
    series: {
        stacked: 'normal'
    }
};
tui.chart.areaChart(container, data, options);

• Sample

---

Creating a range area chart

You can create range area chart by using range data type.

//...
var data = {
    categories: ['Jan', 'Feb', 'Mar','Apr', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    series: [
        {
            name: 'Seoul',
            data: [[-8.3, 0.3], [-5.8, 3.1], [-0.6, 9.1], [5.8, 16.9], [11.5, 22.6], [16.6, 26.6], [21.2, 28.8], [21.8, 30.0], [15.8, 25.6], [8.3, 19.6], [1.4, 11.1], [-5.2, 3.2]]
        }
    ]
};
tui.chart.areaChart(container, data);

• Sample