Beautiful Statistical Data Visualization Library | TOAST UI Chart

TOAST UI Chart is a beautiful library for visualizing statistical data. Post your data on the TOAST UI Diagram. tui.chart is a JavaScript data visualization library that uses Raphaël.js to create a variety of diagrams and diagrams using SVG.

TOAST UI Chart functionality is available when using Plain JavaScript, React, and Vue Component.

Simple, easy to use, and beautiful!

TOAST UI Chart makes your data stand out and displays it in an easy-to-understand way. Moreover, it offers a wide range of theme options to customize the layouts to be suitable for all your services. Chart components such as titles, axes, graph switches, tooltips, plots, series, and more can be customized through options.

Variety of powerful features!


Add different options and animations according to the sizes of the charts using the responsive option.


Make the data displayed in Line, Area and Treemap charts zoomable using the Zoomable option.

Live update

View and manage new data as it is added in real-time using the addData API and the options.series.shift option.

Synchronize Tooltip

Use and sync the tooltip features in real time, the cursor hovers over the chart using the showTooltip API and the custom on the event.

Must Read: Simple and Direct Organization Chart Plugin | OrgChart

How to make use of it:

Installation with NPM:

$ npm install tui-chart --save

Import the tui-chart bundle.

// ES 6
import chart from 'tui-chart';

// CommonJS:
const chart = require('tui-chart');

Create a container factor during which you place the chart.

<div id="myChart">

Prepare your data to be plotted within the chart.

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

Pass the optionally available settings.

var options = {
    chart: {
        width: 1160,
        height: 650,
        title: 'Monthly Revenue',
        format: '1,000'
    yAxis: {
        title: 'Month'
    xAxis: {
        title: 'Amount',
        min: 0,
        max: 9000,
        suffix: '

Apply customized themes.

var theme = {
    series: {
        colors: [
            '#83b14e', '#458a3f', '#295ba0', '#2a4175', '#289399',
            '#289399', '#617178', '#8a9a9a', '#516f7d', '#dddddd'

Generate a primary bar chart on the web page.

var container = document.getElementById('myChart');
tui.chart.barChart(container, data, options);

Must Read: GFM Standard + Chart & UML Markdown WYSIWYG Editor | tui.editor

Charts and Charts Support:

  • Line Chart
  • Area Chart
  • LineArea Chart
  • Bar Chart
  • Column Chart
  • ColumnLine Chart
  • Bullet Chart
  • BoxPlot Chart
  • Treemap Chart
  • Heatmap Chart
  • Scatter Chart
  • LineScatter Chart
  • Bubble Chart
  • Pie Chart
  • NestedPie Chart
  • Radar Chart
  • RadialBar Chart
  • Gauge Chart

Read More – TOAST UI Calendar & Date Picker Component | jQuery


See Demo And Download

Official Website(nhn): Click Here

This superior jQuery/javascript plugin is developed by nhn. For extra advanced usage, please go to the official website.