tutorial

Download

To use the Toast UI Chart you will need to download the chart source and associated libraries. This application is dependent on tui.code-snippet, tui.component-effects and Raphael.js.

There are two ways to download.

Bower install

Using the Bower, you can download them easily. The downloaded file will be saved in bower_components directory. If you want to know more about the Bower, please refer to the http://bower.io/.

bower install tui-chart

Installation

Now, let's include the downloaded files.

Include JS

You can use following sample.

<!-- include libraries -->
<script src="bower_components/tui-code-snippet/code-snippet.min.js"></script>
<script src="bower_components/tui-component-effects/effects.min.js"></script>
<script src="bower_components/raphael/raphael-min.js"></script>
<!-- include chart.min.js -->
<script src="bower_components/tui-chart/dist/chart.min.js"></script>

Include CSS

You can use following sample.

<!-- include application-chart.min.css -->
<link rel="stylesheet" type="text/css" href="bower_components/tui-chart/dist/chart.min.css" />

Create Chart

If you complete the installation, now you can create a chart.

The following example is creating a bar chart. (For a description of options, please see below.)

var container = document.getElementById('container-id'),
    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]
            }
        ]
    },
    options = {
        chart: {
            width: 500,
            height: 400,
            title: 'Chart Title'
        },
        yAxis: {
            title: 'Y Axis Title'
        },
        xAxis: {
            title: 'X Axis Title'
        }
    };

tui.chart.barChart(container, data, options);

You can create chart without option.

var container = document.getElementById('container-id'),
    data = { ... };
tui.chart.barChart(container, data);

Chart Data Type

Toast UI Chart has three types of data - basic type, combo chart type and pie chart type.

Basic Data Type

Basic data type is used in bar chart, column chart, line chart and area chart.

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

Combo Chart Data Type

Combo Chart data type is more complicated.

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

Pie Chart Data Type

Pie Chart data type is more simple.

var data = {
    series: [
        {
            name: 'Legend1',
            data: 20
        },
        {
            name: 'Legend2',
            data: 50
        },
        {
            name: 'Legend3',
            data: 60
        },
        {
            name: 'Legend4',
            data: 80
        },
        {
            name: 'Legend5',
            data: 10
        },
        {
            name: 'Legend6',
            data: 30
        }
    ]
};

Options

How to set options are as follows:

var container = document.getElementById('container-id'),
    data = { ... },
    options: {
        chart: {
            width: 500,
            height: 400,
            title: 'Chart Title'
        }
        yAxis: {
            title: 'Y Axis Title'
        },
        xAxis: {
            title: 'X Axis Title'
        }
    };

tui.chart.barChart(container, data, options);

More Info

Themes

You can apply design to a chart by using themes.

Register Themes

How to register themes are as follows:

var theme = {
    chart: {
        background: '#ffffff',
        fontFamily: 'Verdana'
    },
    //...
};
tui.chart.registerTheme('themeName', theme);

Using themes

If you want to use themes, you need to add the 'theme' option.

//...
var options = {
    theme: 'themeName'
};
tui.chart.lineChart(container, data, options);

More Info

APIs

resize

var data = {...},
    chart = tui.chart.barChart(data);

chart.resize({
  width: 700,
  height: 800
});

tooltip options setting

var data = {...},
    options = {
      //...
      tooltip: {
        align: 'left top',
        position: {
            left: 10,
            top: 10
        }
      }
    },
    chart = tui.chart.barChart(data, options);

// Set align option.
chart.setTooltipAlign('center middle');

// Set position option.
chart.setTooltipPosition({
  left: 20,
  top: 30
});

// Reset align option.
chart.resetTooltipAlign();

// Reset position option.
chart.resetTooltipPosition();

More Info

User Event

selectLegend

var data = {...},
    chart = tui.chart.barChart(data);

chart.on('selectLegend', function(info) {
  console.log(info);
});

selectSeries, unselectSereis

var data = {...},
    chart = tui.chart.barChart(data);

chart.on('selectSeries', function(info) {
  console.log(info);
});

chart.on('unselectSeries', function(info) {
  console.log(info);
});

beforeShowTooltip, afterShowTooltip

var data = {...},
    chart = tui.chart.barChart(data);

chart.on('beforeShowTooltip', function(info) {
  console.log(info);
});

chart.on('afterShowTooltip', function(info) {
  console.log(info);
});