TOAST UI Chart Documentation

TOAST UI Chart is a statistical data visualization library that provides beautiful and customizable charts. It is available in three main flavors depending on your project's environment:

• Plain JavaScript: The core component (@toast-ui/chart).
• React: A wrapper component for React applications (@toast-ui/react-chart).
• Vue: A wrapper component for Vue applications (@toast-ui/vue-chart).

TOAST UI Chart includes several powerful features for data visualization:

• Responsive: Use the responsive option to adjust chart options and animations based on the container size.
• Zoomable: Enable zooming for Line, Area, and Treemap charts using the zoomable option.
• Live Update: Manage real-time data updates using the addData API combined with the options.series.shift option.
• Synchronized Tooltips: Synchronize tooltip displays across charts using the showTooltip API and the on custom event.

TOAST UI Chart provides three types of legends depending on the chart type being used:

1. Basic Legend: Consists of a checkbox, a color icon, and the series name. It is compatible with most charts (Line, Area, Bar, etc.) but not Heatmap or Treemap charts.
   • Clicking the checkbox toggles the visibility of the selected series.
   • Clicking the series name focuses the chart on that specific series.
2. Spectrum Legend: Used for charts that utilize a colorValue (like Heatmap and Treemap). It displays an index representing relative levels within the chart.
3. Circle Legend: Used specifically for Bubble charts to provide an index for circle size. It displays the largest value and provides 0.5x and 0.25x radius indicators.

You can create a LineScatter chart using either the LineScatterChart constructor or the static lineScatterChart method from the Chart class. Both methods require an object containing el (the HTML element), data, and options. It is recommended to use an empty HTML element as the container to avoid unintended side effects.

import { LineScatterChart } from '@toast-ui/chart';

const chart = new LineScatterChart({
  el, 
  data, 
  options
});

// or

import Chart from '@toast-ui/chart';

const chart = Chart.lineScatterChart({
  el, 
  data, 
  options
});

The Pie & Donut Combo Chart from v3.x is now the NestedPieChart in v4.0. It supports multiple nested levels. Data is structured using a series array where child elements use parentName to link to a previous element's name.

const data = {
  series: [
    {
      name: 'browsers',
      data: [{ name: 'Chrome', data: 50 }],
    },
    {
      name: 'versions',
      data: [{ name: 'Chrome 64', parentName: 'Chrome', data: 40 }],
    }
  ],
};

const options = {
  series: {
    browsers: {},
    versions: {}
  }
};

Chart.nestedPieChart({el, data, options});

Data labels in v4.0 are significantly more powerful. Instead of a simple showLabel: true boolean, you now use a dataLabels object within the series configuration to control visibility, offsets, and formatting.

const options = {
  series: {
    dataLabels: {
      visible: true,
      offsetX: 0,
      offsetY: 0,
      formatter: (value) => `$${value}`
    }
  }
};

In v4.0, the package name has changed from tui-chart to the scoped package @toast-ui/chart. To migrate, you must uninstall the old package and install the new one to prevent duplicate installations.

Important: You must also update your import statements to use the new package name.

Install the TOAST UI Chart Vue wrapper using npm to add chart components to your Vue project.

npm install --save @toast-ui/vue-chart

You can create a NestedPieChart instance using either the NestedPieChart constructor or the static Chart.nestedPieChart method. Both methods require an object containing el (the HTML element to draw in), data, and options.

Note: It is recommended to use an empty HTML element as the target el to prevent existing child elements from unintentionally affecting the chart.

import { NestedPieChart } from '@toast-ui/chart';

const chart = new NestedPieChart({el, data, options});

// or

import Chart from '@toast-ui/chart';

const chart = Chart.nestedPieChart({el, data, options});

TOAST UI Chart supports a wide variety of chart types. Documentation is available for each specific type to guide implementation and configuration:

• Line-based: Line Chart, Area Chart, LineArea Chart
• Bar-based: Bar Chart, Column Chart, ColumnLine Chart, Bullet Chart
• Statistical/Distribution: BoxPlot Chart, Treemap Chart, Heatmap Chart, Scatter Chart, LineScatter Chart, Bubble Chart
• Circular/Radial: Pie Chart, NestedPie Chart, Radar Chart, RadialBar Chart, Gauge Chart