Author: | nhnent |
---|---|
Views Total: | 99 views |
Official Page: | Go to website |
Last Update: | December 21, 2022 |
License: | MIT |
Preview:

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