@toast-ui/chart

🍞📈 Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library

🚩 Table of Contents

• !Toast UI Chart
  • 🚩 Table of Contents
  • Collect statistics on the use of open source
  • 💾 Install
    • Via Package Manager
      • npm
    • Via Contents Delivery Network (CDN)
    • Download Source Files
  • 🔨 Usage
    • HTML
    • JavaScript
      • Load

Collect statistics on the use of open source

TOAST UI Chart applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Chart is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following usageStatistics option when creating charts.

const options = {
  // ...
  usageStatistics: false,
};

toastui.Chart.barChart({ el, data, options });

💾 Install

The TOAST UI products can be installed by using the package manager or downloading the source directly. However, we highly recommend using the package manager.

Via Package Manager

The TOAST UI products are registered in npm package manager. Install by using the commands provided by a package manager. When using npm, be sure Node.js is installed in the environment.

npm

$ npm install --save @toast-ui/chart # Latest version
$ npm install --save @toast-ui/chart@<version> # Specific version

Via Contents Delivery Network (CDN)

The TOAST UI Chart is available over a CDN.

• You can use cdn as below.

<link rel="stylesheet" href="https://uicdn.toast.com/chart/latest/toastui-chart.min.css" />
<script src="https://uicdn.toast.com/chart/latest/toastui-chart.min.js"></script>

• Within the download you'll find the following directories

- uicdn.toast.com/
  ├─ chart/
  │  ├─ latest
  │  │  ├─ toastui-chart.js
  │  │  ├─ toastui-chart.min.js
  │  │  ├─ toastui-chart.css
  │  │  ├─ toastui-chart.min.css
  │  ├─ v4.0.0/

Download Source Files

• Download all sources for each version

🔨 Usage

HTML

Add the container element where TOAST UI Chart will be created.

<div id="chart"></div>

JavaScript

Load

The TOAST UI Chart can be used by creating an instance with the constructor function. To access the constructor function, import the module using one of the three following methods depending on your environment.

/* namespace */
const chart = toastui.Chart;

/* CommonJS in Node.js */
const chart = require('@toast-ui/chart');

/* ES6 in Node.js */
import Chart from '@toast-ui/chart';
import { LineChart } from '@toast-ui/chart';

Factory function needs three parameters: el, data, options

• el: Wrapper HTML element that will contain the chart as a child.
• data: Numerical data the chart will be based on.
• options: Functional options including legend, alignment, and tooltip visibilities.

var el = document.getElementById('chart');
var data = {
  categories: [
    //...
  ],
  series: [
    // ...
  ],
};
var options = {
  chart: { width: 700, height: 400 },
};

chart.barChart({ el, data, options });
// or
new BarChart({ el, data, options });

Refer to details for additional information.