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 basic data type.

Basic data type

Basic data type is default type for Toast UI Chart.

var rawData = {
    categories: ['June', 'July', 'Aug', 'Sep', 'Oct', 'Nov'],
    series: [
        {
            name: 'Budget',
            data: [5000, 3000, 6000, 3000, 6000, 4000]
        },
        {
            name: 'Income',
            data: [8000, 1000, 7000, 2000, 5000, 3000]
        }
    ]
};

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: ['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]]
        },
        //...
    ]
};

Coordinate data type

If you want represent Line and Area chart using non-contiguous data, you can use coordinate data type.

var rawData = {
    series: [
        // x, y object type
        {
            name: 'SiteA',
            data: [
                {x: new Date('08/22/2016 10:00:00'), y: 202},
                {x: '08/22/2016 10:05:00', y: 212},
                {x: '08/22/2016 10:10:00', y: 222},
                //...
            ]
        },
        // Array type
        {
            name: 'SiteB',
            data: [
                ['08/22/2016 10:00:00', 312],
                ['08/22/2016 10:10:00', 320],
                ['08/22/2016 10:20:00', 295],
                //...
            ]
        }
    ]
};

---

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

---

Creating a coordinate data type line chart

You can create line chart by using coordinate data type.

var rawData = {
    series: [
        {
            name: 'SiteA',
            data: [
                ['08/22/2016 10:00:00', 202],
                ['08/22/2016 10:05:00', 212],
                ['08/22/2016 10:10:00', 222],
                //...
            ]
        },
        {
            name: 'SiteB',
            data: [
                ['08/22/2016 10:00:00', 312],
                ['08/22/2016 10:10:00', 320],
                ['08/22/2016 10:20:00', 295],
                //...
            ]
        }
    ]
};

• Sample

---

Zoom by mouse drag

If you use zoomable option, you can zoom by mouse drag. (Coordinate type data zoom is not supported. Use default data type.)

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:50:10', '18:50:11', '18:50: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:50:13', [170, 180]);
    // ['18:50:10', '18:50:11', '18:50:12'] ==> ['18:50:10', '18:50:11', '18:50:12', '18:50:13']
    // [110, 120, 130] ==> [110, 120, 130, 170]
    // [140, 150, 160] ==> [140, 150, 160, 180]

    setTimout(function() {
        chart.addData('18:50:14', [190, 200]);
        // ['18:50:10', '18:50:11', '18:50:12', '18:50:13'] ==> ['18:50:10', '18:50:11', '18:50:12', '18:50:13', '18:50: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:50:10', '18:50:11', '18:50: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:50:13', [170, 180]);
    // ['18:50:10', '18:50:11', '18:50:12'] ==> ['18:50:11', '18:50:12', '18:50:13']
    // [110, 120, 130] ==> [120, 130, 170]
    // [140, 150, 160] ==> [150, 160, 180]

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

    //...
});

• Sample

Set an opacity of series area

You could specify the opacify of filled area, by areaOpacity option. The value of option should be a number from 0 to 1. If this property is not set, the default value, 0.5 will be set.

var options = {
    series: {
        // ...
        areaOpacity: 0.3
    }
};