ChartAPI/ExamplesGithub

TOAST UI Chart supports an easy way to draw various and essential charts on your web service.


Browser Support

Chrome Chrome IE Internet Explorer Edge Edge Safari Safari Firefox Firefox
Yes 8+ Yes Yes Yes

True Cross Browser Charts And It's Beautiful!

IE8 CHROME
IE8 CHROME

No one likes legacy, but sometimes it matters.
We started TOAST UI Chart because we could not find a project supporting legacy browsers, maintained reliably, and free for commercial use.

The visuals of the charts in IE8 are exactly as it looks in Chrome.
The TOAST UI Chart guarantees an identical look for all browsers. Draws fast and requires no polyfill, ToastUI uses of the native browser formats, such as SVG and RVML.

The TOAST UI Chart will continue to support legacy browsers under the MIT license
With over 50 releases since June 2015 under MIT License, the TOAST UI Chart is the answer if you have the same requirements as us.


Features

  • Intuitive and easy to apply.
  • Is an open-source JavaScript library.
  • Can be used in legacy browsers including IE8.
  • Change the chart in detail using many options and custom themes.

Single Charts

The TOAST UI Chart provides many types of charts to visualize the various forms of data.

Bar
Column
Line
Area
Radial
Bubble
Scatter
Pie (General)
Pie (Donut)
2018-03-13 10 33 49 2018-03-13 10 44 51 2018-03-13 10 46 31 2018-03-13 10 43 07
Heatmap
Treemap
Map Boxplot Bullet
2018-03-13 10 47 56 2018-03-13 10 51 01 2018-03-13 10 59 27 2018-03-13 11 01 46

Combo Charts

The TOAST UI Chart covers complex data visualization.

Column-Line Pie-Donut Line-Area Line-Scatter
2018-03-13 11 04 48 2018-03-13 11 06 16 2018-03-13 11 07 44 2018-03-13 11 19 42

Customize

Visualize the data in different styles by customizing the details of the charts.

Various expressions Custom theme Stack option Diverging option Group tooltip
2018-03-13 11 43 13 2018-03-13 11 40 43 2018-03-13 11 44 15 2018-03-13 11 45 15 2018-03-13 11 46 39

And More From Examples

Check out Example and wiki to discover more.


Install

The TOAST UI products can be installed by using the package manager or downloading the source directly. However, we highly recommend using the package manager.

Via Package Manager

The TOAST UI products are registered in two package managers, npm and bower. Install by using the commands provided by each package manager. When using npm, be sure Node.js is installed in the environment.

npm
$ npm install --save tui-chart # Latest version
$ npm install --save tui-chart@<version> # Specific version
bower
$ bower install tui-chart # Latest version
$ bower install tui-chart#<tag> # Specific version

Via Contents Delivery Network (CDN)

The TOAST UI Chart is available over a CDN.

  • You can use cdn as below.
<link rel="stylesheet" href="https://uicdn.toast.com/tui.chart/latest/tui-chart.min.css">

<script src="https://uicdn.toast.com/tui.chart/latest/tui-chart.min.js"></script>
  • Within the download you'll find the following directories
tui.chart/
├─ latest
│  ├─ tui-chart.js
│  ├─ tui-chart.min.js
│  ├─ tui-chart.css
│  ├─ tui-chart.min.css
│  ├─ maps/
│  │  ├── (china | japan | singapore | south-korea | taiwan | thailand | use | world).js
├─ v3.0.1/

Download Source Files


Usage

HTML

Add the container element where TOAST UI Chart will be created.

<div id="chart"></div>

JavaScript

Load

The TOAST UI Chart can be used by creating an instance with the constructor function. To get the constructor function, import the module using one of the following three ways depending on your environment.

var chart = tui.chart; /* namespace */
var chart = require('tui-chart'); /* CommonJS in Node.js */
import chart from 'tui-chart'; /* ES6 in Node.js */

Factory function needs three parameters: container, data, options

  • Container: Wrapper HTMLElements that will contain charts as a child
  • data: numeric data need to make charts
  • options: functional options like legend aligment or tooltip visiblities
var container = document.getElementById('chart-area');
var data = {
    category: [...], series: [...]
};
var options = {
    chart: {width: 700, height: 400}
};

chart.barChart(container, data, options);

See details for additional informations.


Documents

See the older versions of API page on the releases page.


Contributing


TOAST UI Family


License

This software is licensed under the MIT © NHN Entertainment.