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 started for base installation of Toast UI Chart.

---

Data type

Line chart and area chart use the default data type.

var rawData = {
    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 rawData = {
    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, rawData, options);

• Sample

---

Creating a stacked area chart

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

Example

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

• Sample

---

Creating a range area chart

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

//...
var rawData = {
    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, rawData);

• Sample

---

Zoom by mouse drag

If you use zoomable option, you can zoom by mouse drag.

var options = {
    series: {
        zoomable: true;
    }
}
tui.chart.areaChart(container, rawData, options);

• Sample

---

Automatically adjusting count of tick

If you use a lot of data, you will be difficult to read the label of x-axis. In this case, you can adjusting count of tick by using tickInterval=auto option.

var options = {
    xAxis: {
        tickInterval: 'auto';
    }
}
tui.chart.areaChart(container, rawData, options);

---

Dynamically adding data

You can use the addData API to add data, it is reflected on the graph in real time.

var rawData = {
    categories: ['18:40:10', '18:40:11', '18:40:12']
    series: [
        {
            name: 'SiteA',
            data: [110, 120, 130]
        },
        {
            name: 'SiteB',
            data: [140, 150, 160]
        }
    ]
};
var chart = tui.chart.lineChart(container, data, options);

chart.on('load', function() {
    chart.addData('18:40:13', [170, 180]);
    // ['18:40:10', '18:40:11', '18:40:12'] ==> ['18:40:10', '18:40:11', '18:40:12', '18:40:13']
    // [110, 120, 130] ==> [110, 120, 130, 170]
    // [140, 150, 160] ==> [140, 150, 160, 180]

    setTimout(function() {
        chart.addData('18:40:14', [190, 200]);
        // ['18:40:10', '18:40:11', '18:40:12', '18:40:13'] ==> ['18:40:10', '18:40:11', '18:40:12', '18:40:13', '18:40:14']
        // [110, 120, 130, 170] ==> [110, 120, 130, 170, 190]
        // [140, 150, 160, 180] ==> [140, 150, 160, 180, 200]
    }, 1000);

    //...
});

And if you use shifting option, your graph is will be moving to left.

var rawData = {
    categories: ['18:40:10', '18:40:11', '18:40:12']
    series: [
        {
            name: 'SiteA',
            data: [110, 120, 130]
        },
        {
            name: 'SiteB',
            data: [140, 150, 160]
        }
    ]
};
var options = {
    series: {
        shifting: true
    }
}
var chart = tui.chart.lineChart(container, data, options);

chart.on('load', function() {
    chart.addData('18:40:13', [170, 180]);
    // ['18:40:10', '18:40:11', '18:40:12'] ==> ['18:40:11', '18:40:12', '18:40:13']
    // [110, 120, 130] ==> [120, 130, 170]
    // [140, 150, 160] ==> [150, 160, 180]

    setTimout(function() {
        chart.addData('18:40:14', [190, 200]);
        // ['18:40:11', '18:40:12', '18:40:13'] ==> ['18:40:12', '18:40:13', '18:40:14']
        // [120, 130, 170] ==> [130, 170, 190]
        // [150, 160, 180] ==> [160, 180, 200]
    }, 1000);

    //...
});

• Sample