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

data visualization libraries python, data visualization libraries js, most popular data visualization library, data visualization libraries react, graph visualization javascript

Why TOAST UI Chart?

Simple, easy to use, and beautiful!

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

A variety of powerful features!

Responsive

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

Zoomable

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 options.series.shift option.

Synchronize Tooltip

Use and sync tooltip features Right now, the cursor is hovering over the chart using the showTooltip API and custom event.

Features

TOAST UI Diagram provides many types of diagrams for visualizing different shapes of data.

• Stack options
• Various options
• Change event detection type
• Custom theme
• Custom tip
• Export xls, csv, png and jpeg file
• Live update
• Responsive design

How to make use of it:

Installing with NPM:

# NPM
$ npm install tui-chart --save

Import the tui-chart package.

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

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

Create a container element in which you want to place the chart.

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

Prepare your data to be plotted in 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 on optional 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 custom themes.

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

Create a basic bar chart on the page.

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

Charts & Graphs supported:

• Area Chart
• Bar Chart
• Box Plot Chart
• Bubble Chart
• Bullet Chart
• Column Chart
• Column Line Combo Chart
• Gauge Chart
• Heatmap Chart
• Line Area Combo Chart
• Line Chart
• Line Scatter Combo Chart
• Map Chart
• Pie Chart
• Pie Donut Combo Chart
• Radial Chart
• RadialBar Chart
• Scatter Chart
• Treemap Chart

Full Featured Data Visualization Library, TOAST UI Chart Plugin/Github, best data visualization libraries, javascript graph visualization library, python data visualization

See Demo And Download

Official Website(nhn): Click Here

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