Press "Enter" to skip to content

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.

best data visualization library, data visualization libraries js, data visualization library javascript

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

Interactive Graph Visualization For Messy Data Using D3.js | ggraph

How to make use of it:

Installation with NPM:

# 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 wish to place the chart.

<div id="myChart">
</div>

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);

Full Featured Data Visualization Library, TOAST UI Chart Plugin/Github

TOAST-UI-Chart-D


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.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *