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]
        }
    ]
};

---

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);

• Spline Line Chart 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);

• Stacked Area Chart Sample

---