Full Featured Data Visualization Library – tui.chart

Category: Chart & Graph , Javascript , Recommended | December 21, 2022
Author:nhnent
Views Total:99 views
Official Page:Go to website
Last Update:December 21, 2022
License:MIT

Preview:

Full Featured Data Visualization Library  – tui.chart

Description:

tui.chart is a JavaScript data visualization library that makes use of Raphaël.js to create a wide variety of charts & graphs using SVG.

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

Basic usage:

Installation 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 the 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: '$'
    },
     series: {
         showLabel: true
     }
};

Apply custom themes.

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

Generate a basic bar chart on the page.

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

Changelog:

v4.6.1(12/21/2022)

  • Bugfix

v4.5.0 (11/16/2022)

  • Add rangeSelection option on Line, Column Chart

v4.4.3 (04/27/2022)

  • Add types selectSeries, unselectSeries into index.d.ts
  • Fix selectSeries behaviour in scatter/heatmap chart

v4.4.0 (09/28/2021)

  • Add new option named ‘colorByCategories’, which paints bar color based on categories.

v4.3.6 (07/28/2021)

  • Bug Fixes

v4.3.5 (06/21/2021)

  • Fix Error when clicking export men

v4.3.4 (05/24/2021)

  • Fix tooltip is not removed when mouseout canvas

v4.3.3 (05/20/2021)

  • Fix Line chart using the zoomable option is not drawn properly when there are multiple null data

v4.3.2 (04/22/2021)

  • Bug Fixes

v4.3.0 (03/31/2021)

  • Added Gauge chart

v4.2.1 (03/30/2021)

  • Fix the coordinate chart was not rendered properly
  • Fix range plot bands not rendering properly
  • Fix chart not rendering properly in webpack5
  • Fix the theme was not applied when calling the selectSeries API
  • Fix the chart was not drawn properly when setData in the no data state

v4.2.0 (03/17/2021)

  • Controls the width and overflow options of the legend item. If a value is given to item.width and the overflow setting is not specified, overflow:’ellipsis’ is applied.

v4.1.4 (03/08/2021)

  • Fix mouse event detect to be correct in scaled area.
  • Remove the type that is imported and used in the src path.

v4.1.3 (02/26/2021)

  • Fix tooltip and export menu location to be correct in relative position.
  • Fixed animation is properly exposed with responsive options.

v4.1.2 (02/24/2021)

  • Bug fixes
  • add types for radialBar chart visible, null data

v4.1.1 (02/19/2021)

  • Fix issue where heatmap series and categories were not synced

v4.0.5 (02/18/2021)

  • A new chart type, the RadialBar chart announced

v4.0.4 (02/04/2021)

  • Bugfix

You Might Be Interested In:


Leave a Reply