### TUI Chart Getting Started Guide

Source: https://github.com/nhn/tui.chart/wiki/Home

Provides instructions on how to get started with TUI Chart, including installation and basic usage.

```markdown
## tutorial

- [🚀 Getting Started](https://github.com/nhn/tui.chart/blob/main/docs/en/getting-started.md)
```

--------------------------------

### Install Toast UI Chart with Bower

Source: https://github.com/nhn/tui.chart/wiki/getting-started

Installs the Toast UI Chart library using the Bower package manager. This command downloads the library and its dependencies into the 'bower_components' directory.

```bash
bower install tui-chart
```

--------------------------------

### Initial Development Environment Setup

Source: https://github.com/nhn/tui.chart/blob/main/CONTRIBUTING.md

Steps to set up the local development environment for TOAST UI Chart. This includes cloning the repository, installing dependencies using npm and Lerna, and starting the development server for the main chart application.

```sh
$ git clone https://github.com/nhn/tui.chart.git
$ cd tui.chart
$ npm install
$ npx lerna bootstrap

# link...

$ cd apps/chart
$ npm run serve
```

--------------------------------

### Basic Scatter Chart Example

Source: https://github.com/nhn/tui.chart/blob/main/apps/chart/examples/example11-01-scatter-chart-basic.html

This snippet demonstrates the fundamental setup for a scatter chart using the tui.chart library. It assumes the necessary library is loaded and configured. The example is intended for illustrative purposes and may require additional setup depending on the project environment.

```javascript
// This is a placeholder for the actual JavaScript code that would render a basic scatter chart.
// The actual implementation would involve creating a chart instance and configuring it with scatter data.
// Example structure:
// import Chart from '@toast-ui/chart';
// const chart = new Chart({...});
// chart.render();
console.log('Basic scatter chart example placeholder.');
```

--------------------------------

### Development Workflow: Initial Setup

Source: https://github.com/nhn/tui.chart/blob/main/CONTRIBUTING.md

Before contributing code, ensure you have the necessary prerequisites installed. This typically involves cloning the repository and setting up the development environment.

```English
## Pull Requests

- [Development Workflow](#development-workflow)
  - [Prerequisites](#prerequisites)
  - [1. Initial Setup](#1-initial-setup)
  - [2. Make change from right branch](#2-make-change-from-right-branch)
    - [Checkout a branch](#checkout-a-branch)
  - [3. Test](#3-test)
  - [4. Commit](#4-commit)
  - [5. Yes! Pull request](#5-yes-pull-request)
    - [Title](#title)
    - [Description](#description)
  - [Building specific packages](#building-specific-packages)
  - [Wrapper Development](#wrapper-development)
```

--------------------------------

### Project Setup for Contribution

Source: https://github.com/nhn/tui.chart/blob/main/apps/react-chart/README.md

Provides the necessary shell commands to set up a local development environment for contributing to the TOAST UI Chart project, including cloning the repository, installing dependencies, and checking for errors.

```sh
$ git clone https://github.com/{your-personal-repo}/[[repo name]].git
$ cd [[repo name]]
$ npm install
```

--------------------------------

### Project Setup and Contribution

Source: https://github.com/nhn/tui.chart/blob/main/apps/vue-chart/README.md

Provides instructions for setting up the TUI Chart project locally, including cloning the repository, installing dependencies, and preparing for pull requests. It outlines the initial steps for developers.

```shell
$ git clone https://github.com/{your-personal-repo}/[[repo name]].git
$ cd [[repo name]]
$ npm install
```

--------------------------------

### Install TOAST UI Chart (npm)

Source: https://github.com/nhn/tui.chart/blob/main/docs/v4.0-migration-guide-ko.md

Compares the npm installation commands for TOAST UI Chart between v3.x and v4.0. Highlights the package name change from `tui-chart` to `@toast-ui/chart`.

```sh
$ npm install tui-chart
$ npm install tui-chart@<version>
```

```sh
$ npm install @toast-ui/chart
$ npm install @toast-ui/chart@<version>
```

--------------------------------

### Install TOAST UI Chart

Source: https://github.com/nhn/tui.chart/blob/main/docs/v4.0-migration-guide-en.md

Compares the npm installation commands for v3.x and v4.0 of TOAST UI Chart, highlighting the package name change from `tui-chart` to `@toast-ui/chart`.

```sh
$ npm install tui-chart
$ npm install tui-chart@<version>
```

```sh
$ npm install @toast-ui/chart
$ npm install @toast-ui/chart@<version>
```

--------------------------------

### Include Toast UI Chart Files

Source: https://github.com/nhn/tui.chart/wiki/getting-started

Includes the necessary CSS and JavaScript files for Toast UI Chart and its dependencies (tui-code-snippet, Raphael.js) in an HTML document. Also shows how to include map data for map charts.

```html
<!-- include application-chart.min.css -->
<link rel="stylesheet" type="text/css" href="bower_components/tui-chart/dist/chart.min.css" />
<!-- include libraries -->
<script src="bower_components/tui-code-snippet/code-snippet.min.js"></script>
<script src="bower_components/raphael/raphael.min.js"></script>
<!-- include chart.min.js -->
<script src="bower_components/tui-chart/dist/chart.min.js"></script>
<!-- include map data (only map chart) -->
<script src="bower_components/tui-chart/dist/maps/world.js"></script>
```

--------------------------------

### Create a Bar Chart

Source: https://github.com/nhn/tui.chart/wiki/getting-started

Demonstrates how to create a bar chart using Toast UI Chart. It defines the chart container, data structure (categories and series), and chart options (dimensions, titles).

```javascript
var container = document.getElementById('container-id'),
    data = {
        categories: ['cate1', 'cate2', 'cate3'],
        series: [
            {
                name: 'Legend1',
                data: [20, 30, 50]
            },
            {
                name: 'Legend2',
                data: [40, 40, 60]
            },
            {
                name: 'Legend3',
                data: [60, 50, 10]
            },
            {
                name: 'Legend4',
                data: [80, 10, 70]
            }
        ]
    },
    options = {
        chart: {
            width: 500,
            height: 400,
            title: 'Chart Title'
        },
        yAxis: {
            title: 'Y Axis Title'
        },
        xAxis: {
            title: 'X Axis Title'
        }
    };

tui.chart.barChart(container, data, options);
```

--------------------------------

### Bubble Chart Basic Example

Source: https://github.com/nhn/tui.chart/blob/main/apps/chart/examples/example04-01-bubble-chart-basic.html

This snippet demonstrates the basic setup and usage of a Bubble Chart. It's important to note that the code might execute slower in certain environments due to runtime transpilation via babel-standalone, as mentioned in the project documentation.

```javascript
// Example code for tui.chart Bubble Chart basic usage would go here.
// This is a placeholder as the provided text only contains descriptive information and a link.
// For actual code, please refer to the tutorial linked in the documentation.
```

--------------------------------

### Install TOAST UI Chart with npm

Source: https://github.com/nhn/tui.chart/blob/main/docs/ko/getting-started.md

Installs the latest version or a specific version of TOAST UI Chart using npm. Ensure Node.js is installed.

```bash
$ npm install --save @toast-ui/chart # 최신 버전
$ npm install --save @toast-ui/chart@<version> # 특정 버전
```

--------------------------------

### Install TOAST UI Chart via npm

Source: https://github.com/nhn/tui.chart/blob/main/docs/en/getting-started.md

Installs the latest version or a specific version of TOAST UI Chart using npm. Ensure Node.js is installed.

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

--------------------------------

### Include TOAST UI Chart via CDN

Source: https://github.com/nhn/tui.chart/blob/main/docs/ko/getting-started.md

Includes the TOAST UI Chart CSS and JavaScript files using CDN links. This is a quick way to start using the chart library without installation.

```html
<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>
```

--------------------------------

### Setup and Development Commands for TOAST UI Chart

Source: https://github.com/nhn/tui.chart/blob/main/README.md

This section details the necessary npm commands for setting up the development environment, running the development server, storybook, and tests for the TOAST UI Chart project.

```sh
$ git clone https://github.com/{your-personal-repo}/tui.chart.git
$ npm install
$ cd apps/chart
$ npm install
$ npm run test
```

```sh
$ npm run serve
```

```sh
$ npm run storybook
```

```sh
$ npm run test
```

--------------------------------

### Initializing TOAST UI Chart Instance

Source: https://github.com/nhn/tui.chart/blob/main/apps/chart/README.md

Provides an example of how to create a chart instance by passing the target element, data, and options to the constructor.

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

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

--------------------------------

### Export Menu Theme Configuration Example

Source: https://github.com/nhn/tui.chart/blob/main/docs/ko/common-theme.md

Provides a practical example of how to apply the `theme.exportMenu` configuration in JavaScript. This snippet demonstrates setting various style properties for both the export button and the menu panel, including colors, dimensions, and font styles.

```js
const options = {
  theme: {
    exportMenu: {
      button: {
        backgroundColor: '#ff0000',
        borderRadius: 5,
        borderWidth: 2,
        borderColor: '#000000',
        xIcon: {
          color: '#ffffff',
          lineWidth: 3,
        },
        dotIcon: {
          color: '#ffffff',
          width: 10,
          height: 3,
          gap: 1,
        },
      },
      panel: {
        borderColor: '#ff0000',
        borderWidth: 2,
        borderRadius: 10,
        header: {
          fontSize: 15,
          fontFamily: 'fantasy',
          color: '#ffeb3b',
          fontWeight: 700,
          backgroundColor: '#673ab7',
        },
        body: {
          fontSize: 12,
          fontFamily: 'fantasy',
          color: '#ff0000',
          fontWeight: '500',
          backgroundColor: '#000000',
        },
      },
    },
  },
};
```

--------------------------------

### Applying Legend Theme Options

Source: https://github.com/nhn/tui.chart/blob/main/docs/ko/common-theme.md

Example of applying theme options to the legend labels, customizing font family, size, weight, and color.

```js
const options = {
  theme: {
    legend: {
      label: {
        fontFamily: 'cursive',
        fontSize: 15,
        fontWeight: 700,
        color: '#ff416d'
      }
    }
  }
};
```

--------------------------------

### Styling Legend Labels with Theme

Source: https://github.com/nhn/tui.chart/blob/main/docs/ko/common-legend.md

Provides an example of how to customize the appearance of legend labels, such as font family, size, weight, and color, using the `theme.legend.label` options.

```js
const options = {
  theme: {
    legend: {
      label: {
        fontFamily: 'cursive',
        fontSize: 15,
        fontWeight: 700,
        color: '#ff416d',
      },
    },
  },
};
```

--------------------------------

### Applying Chart Title Theme Options

Source: https://github.com/nhn/tui.chart/blob/main/docs/ko/common-theme.md

Example of applying theme options to the chart title, customizing font family, size, weight, and color.

```js
const options = {
  theme: {
    title: {
      fontFamily: 'Comic Sans MS',
      fontSize: 45,
      fontWeight: 100,
      color: '#ff416d'
    }
  }
};
```

--------------------------------

### Create TOAST UI Chart Instance

Source: https://github.com/nhn/tui.chart/blob/main/docs/ko/getting-started.md

Demonstrates how to create a chart instance by providing the HTML element, data, and options to the chart constructor.

```javascript
const el = document.getElementById('chart');
const data = {
  categories: ['Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  series: [
    {
      name: 'Budget',
      data: [5000, 3000, 5000, 7000, 6000, 4000, 1000],
    },
    {
      name: 'Income',
      data: [8000, 4000, 7000, 2000, 6000, 3000, 5000],
    },
  ],
};
const options = {
  chart: { width: 700, height: 400 },
};

const chart = Chart.barChart({ el, data, options });
// const chart = new BarChart({ el, data, options }); // 두 번째 방법
```

--------------------------------

### Applying Global Chart Theme Options

Source: https://github.com/nhn/tui.chart/blob/main/docs/ko/common-theme.md

Example of how to apply global theme settings for TOAST UI Chart, specifying the font family and background color.

```js
const options = {
  theme: {
    chart: {
      fontFamily: 'Verdana',
      backgroundColor: 'rgba(9, 206, 115, 0.1)',
    }
  }
};
```

--------------------------------

### APIDOC: Chart Instance Methods

Source: https://github.com/nhn/tui.chart/blob/main/docs/v4.0-migration-guide-en.md

Provides details on the instance methods available in tui.chart v4.0, including their functionality, parameters, and links to further documentation.

```APIDOC
addSeries:
  Adds a new series to the chart.
  Link: https://github.com/nhn/tui.chart/blob/main/docs/en/common-api.md#addseries

setOptions:
  Changes all of the chart's options.
  Link: https://github.com/nhn/tui.chart/blob/main/docs/en/common-api.md#setoptions

updateOptions:
  Changes the chart's original options.
  Link: https://github.com/nhn/tui.chart/blob/main/docs/en/common-api.md#updateoptions

getOptions:
  Returns the options that are currently applied to the chart.
  Link: https://github.com/nhn/tui.chart/blob/main/docs/en/common-api.md#getoptions

showTooltip:
  Shows the series tooltip.
  Link: https://github.com/nhn/tui.chart/blob/main/docs/en/common-api.md#showtooltip

hideTooltip:
  Hides the series tooltip.
  Link: https://github.com/nhn/tui.chart/blob/main/docs/en/common-api.md#hidetooltip
```

--------------------------------

### Treemap Chart Theming Example

Source: https://github.com/nhn/tui.chart/blob/main/apps/chart/examples/example12-07-treemap-chart-theme.html

This example demonstrates how to define and apply a theme to a Treemap chart using tui.chart. The theme customization includes setting start and end colors, border properties, and specific styles for selected and hovered states of chart elements. It also configures chart options like title, dimensions, tooltips, legend, and data label visibility.

```javascript
const el = document.getElementById('chart-area');
const data = {
  series: [
    {
      label: 'Asia',
      children: [
        { label: 'South Korea', data: 99909, colorValue: 499.81 },
        { label: 'Japan', data: 364485, colorValue: 335.61 },
        { label: 'Jordan', data: 88802, colorValue: 86.07 },
        { label: 'Iraq', data: 437367, colorValue: 81.6 }
      ]
    },
    {
      label: 'Europe',
      children: [
        { label: 'UK', data: 241930, colorValue: 262.84 },
        { label: 'France', data: 640427, colorValue: 117.83 },
        { label: 'Hungary', data: 89608, colorValue: 106.54 },
        { label: 'Portugal', data: 91470, colorValue: 115.35 }
      ]
    },
    {
      label: 'America',
      children: [
        { label: 'Panama', data: 74340, colorValue: 52.81 },
        { label: 'Honduras', data: 111890, colorValue: 75.15 },
        { label: 'Uruguay', data: 175015, colorValue: 19.6 },
        { label: 'Cuba', data: 109820, colorValue: 101.47 }
      ]
    },
    {
      label: 'Africa',
      children: [
        { label: 'Malawi', data: 94080, colorValue: 146.09 },
        { label: 'Ghana', data: 227533, colorValue: 113.13 },
        { label: 'Togo', data: 54385, colorValue: 126.28 },
        { label: 'Benin', data: 114305, colorValue: 96.61 }
      ]
    }
  ]
};

const theme = {
  series: {
    startColor: '#F3FFE3',
    endColor: '#FF9CEE',
    borderWidth: 3,
    borderColor: '#ddd',
    select: {
      color: '#fdfd96',
      borderWidth: 2,
      borderColor: '#80CEE1'
    },
    hover: {
      color: '#FFB144',
      borderWidth: 5,
      borderColor: '#CAE7C1'
    }
  }
};

const options = {
  chart: {
    title: 'Used disk space',
    width: 900,
    height: 500
  },
  tooltip: {
    formatter: (value) => `${value}GB`
  },
  legend: {
    align: 'top'
  },
  series: {
    useColorValue: true,
    selectable: true,
    dataLabels: {
      visible: true,
      useTreemapLeaf: true
    }
  },
  theme
};

const chart = toastui.Chart.treemapChart({ el, data, options });
```

--------------------------------

### Customizing Legend Label Theme

Source: https://github.com/nhn/tui.chart/blob/main/docs/en/common-legend.md

Provides an example of how to style the legend's text labels using theme options. This includes changing the font family, size, weight, and color.

```js
const options = {
  theme: {
    legend: {
      label: {
        fontFamily: 'cursive',
        fontSize: 15,
        fontWeight: 700,
        color: '#ff416d',
      },
    },
  },
};
```

--------------------------------

### CDN Setup for tui.chart v4.0

Source: https://github.com/nhn/tui.chart/blob/main/docs/v4.0-migration-guide-en.md

This snippet shows how to include the tui.chart library using CDN links in an HTML file for development environments. It includes both the CSS and JavaScript files.

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

--------------------------------

### tui.chart 'chart' Options Guide

Source: https://github.com/nhn/tui.chart/wiki/_Sidebar

Guide detailing the configuration options for the main 'chart' object in tui.chart. Covers general chart settings and properties.

```markdown
`chart` options: https://github.com/nhn/tui.chart/blob/main/docs/en/common-chart-options.md
```

--------------------------------

### TUI Chart API Introduction

Source: https://github.com/nhn/tui.chart/wiki/Home

An introduction to the TUI Chart API, explaining its structure and usage.

```markdown
- [API introduction](https://github.com/nhn/tui.chart/blob/main/docs/en/common-api.md)
```

--------------------------------

### TUI Chart 'chart' Options Guide

Source: https://github.com/nhn/tui.chart/wiki/Home

Documentation for the 'chart' options available in TUI Chart for configuration.

```markdown
- [`chart` options](https://github.com/nhn/tui.chart/blob/main/docs/en/common-chart-options.md)
```

--------------------------------

### Basic Pie Chart Creation

Source: https://github.com/nhn/tui.chart/blob/main/apps/chart/examples/example09-01-pie-chart-basic.html

This JavaScript code snippet shows how to initialize a pie chart using tui.chart. It requires an HTML element for rendering, chart data with categories and series, and configuration options for the chart's appearance and behavior. The example uses sample data for web browser usage share.

```javascript
const el = document.getElementById('chart-area');
const data = {
  categories: ['Browser'],
  series: [
    { name: 'Chrome', data: 46.02 },
    { name: 'IE', data: 20.47 },
    { name: 'Firefox', data: 17.71 },
    { name: 'Safari', data: 5.45 },
    { name: 'Opera', data: 3.1 },
    { name: 'Etc', data: 7.25 },
  ],
};
const options = {
  chart: {
    title: 'Usage share of web browsers',
    width: 600,
    height: 400
  },
};
const chart = toastui.Chart.pieChart({ el, data, options });
```

--------------------------------

### tui.chart Live Update Options Guide

Source: https://github.com/nhn/tui.chart/wiki/_Sidebar

Guide on configuring live data updates for charts in tui.chart. Covers settings for real-time data rendering and chart refreshes.

```markdown
Live Update options: https://github.com/nhn/tui.chart/blob/main/docs/en/common-liveUpdate-options.md
```

--------------------------------

### Applying Axis Theme Options

Source: https://github.com/nhn/tui.chart/blob/main/docs/ko/common-theme.md

Example of applying theme options to both X and Y axes, customizing title, label styles, line width, and color. The Y-axis demonstrates styling for multiple axes.

```js
const options = {
  theme: {
    xAxis: {
      title: {
        fontFamily: 'Impact',
        fontSize: 15,
        fontWeight: 400,
        color: '#ff416d'
      },
      label: {
        fontFamily: 'fantasy',
        fontSize: 11,
        fontWeight: 700,
        color: '#6EB5FF'
      },
      width: 2,
      color: '#6655EE'
    },
    yAxis: [
      {
        title: {
          fontFamily: 'Impact',
          fontSize: 17,
          fontWeight: 400,
          color: '#03C03C'
        },
        label: {
          fontFamily: 'cursive',
          fontSize: 11,
          fontWeight: 700,
          color: '#6655EE'
        },
        width: 3,
        color: '#88ddEE'
      },
      {
        title: {
          fontFamily: 'Comic Sans MS',
          fontSize: 13,
          fontWeight: 600,
          color: '#00a9ff'
        },
        label: {
          fontFamily: 'cursive',
          fontSize: 11,
          fontWeight: 700,
          color: '#FFABAB'
        },
        width: 3,
        color: '#AFFCCA'
      }
    ]
  }
};
```

--------------------------------

### Initialize Chart Instance (Namespace Change)

Source: https://github.com/nhn/tui.chart/blob/main/docs/v4.0-migration-guide-en.md

Shows the change in how to initialize a chart instance in the browser environment, from `tui.Chart` in v3.x to `toastui.Chart` in v4.0.

```js
const chart = tui.Chart.barChart(el, data, options);
```

```js
const chart = toastui.Chart.barChart({el, data, options});
```

--------------------------------

### Import TOAST UI Chart (ES6 Module)

Source: https://github.com/nhn/tui.chart/blob/main/docs/v4.0-migration-guide-en.md

Illustrates importing TOAST UI Chart using ES6 module syntax in v3.x and v4.0, including an example of importing specific chart types in v4.0.

```js
import Chart from 'tui-chart'; /* ES6 Module Syntax */
```

```js
import Chart from '@toast-ui/chart'; /* ES6 Module Syntax */
```

```js
import { BarChart } from '@toast-ui/chart'; /* ES6 Module 
Syntax */
```

--------------------------------

### TOAST UI Chart v4.0 Instance Methods

Source: https://github.com/nhn/tui.chart/blob/main/docs/v4.0-migration-guide-ko.md

Lists and describes the new instance methods available in TOAST UI Chart v4.0 for enhanced user interaction and chart manipulation. These methods include adding series, updating options, and managing tooltips.

```APIDOC
Chart Instance Methods:

addSeries(seriesOptions)
  - Adds a new series to the chart.
  - Parameters:
    - seriesOptions: Configuration object for the new series.
  - Link: [Guide](https://github.com/nhn/tui.chart/blob/main/docs/ko/common-api.md#addseries)

setOptions(options)
  - Replaces all existing chart options with the provided ones.
  - Parameters:
    - options: The new options object for the chart.
  - Link: [Guide](https://github.com/nhn/tui.chart/blob/main/docs/ko/common-api.md#setoptions)

updateOptions(options)
  - Updates the chart with new options, merging them with existing ones.
  - Parameters:
    - options: An object containing the options to update.
  - Link: [Guide](https://github.com/nhn/tui.chart/blob/main/docs/ko/common-api.md#updateoptions)

getOptions()
  - Returns the current options applied to the chart.
  - Returns: An object representing the chart's current options.
  - Link: [Guide](https://github.com/nhn/tui.chart/blob/main/docs/ko/common-api.md#getoptions)

showTooltip(pointInfo)
  - Displays the tooltip for a specific data point.
  - Parameters:
    - pointInfo: Information about the point for which to show the tooltip.
  - Link: [Guide](https://github.com/nhn/tui.chart/blob/main/docs/ko/common-api.md#showtooltip)

hideTooltip()
  - Hides the currently displayed tooltip.
  - Link: [Guide](https://github.com/nhn/tui.chart/blob/main/docs/ko/common-api.md#hidetooltip)
```

--------------------------------

### HTML Container for Responsive Chart

Source: https://github.com/nhn/tui.chart/blob/main/docs/en/common-responsive-options.md

An example HTML structure for a chart container, using CSS viewport units (`vw` and `vh`) to define its width and height. This setup allows the chart's 'auto' dimensions to adapt to the browser window size, triggering the responsive rules.

```html
<div id="chart" style="width: 90vw; height: 90vh">

```

--------------------------------

### RadialBar Chart AngleRange Configuration

Source: https://github.com/nhn/tui.chart/blob/main/apps/chart/examples/example18-04-radialBar-chart-angleRange.html

This snippet shows how to initialize a RadialBar chart with custom angle ranges using the tui.chart library. It defines chart data and options, specifically setting the `start` and `end` properties within `series.angleRange` to control the visual extent of the radial bars. The code requires the `toastui` library to be available in the environment.

```javascript
const el = document.getElementById('chart-area');
const data = {
  categories: ['Korea', 'United States', 'Germany', 'Canada', 'Austria'],
  series: [
    {
      name: 'Gold medals',
      data: [132, 105, 92, 73, 64],
    },
    {
      name: 'Silver medals',
      data: [125, 110, 86, 64, 81],
    },
    {
      name: 'Bronze medals',
      data: [111, 90, 60, 62, 87],
    },
  ],
};
const options = {
  chart: {
    title: 'Winter Olympic medals per existing country (TOP 5)',
    width: 700,
    height: 700
  },
  series: {
    angleRange: {
      start: 45,
      end: 315
    }
  }
};
const chart = toastui.Chart.radialBarChart({ el, data, options });
```

--------------------------------

### Creating a Line Chart

Source: https://github.com/nhn/tui.chart/blob/main/docs/en/chart-line.md

Demonstrates two methods for creating a Line Chart instance: using the constructor or a static method. Both require an HTML element, data, and options.

```js
import { LineChart } from '@toast-ui/chart';

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

// or

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

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

--------------------------------

### Create Chart Instance (v3.x vs v4.0)

Source: https://github.com/nhn/tui.chart/blob/main/docs/v4.0-migration-guide-ko.md

Compares the methods for creating a chart instance in TOAST UI Chart v3.x and v4.0. v3.x uses static functions with arguments passed sequentially, while v4.0 supports both static functions and constructor functions with options passed as an object.

```js
import Chart from 'tui-chart';

const chart = Chart.barChart(el, data, options);
```

```js
// 1. 정적 함수를 통해 생성
import Chart from '@toast-ui/chart';

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

// 2. 생성자 함수를 통해 생성
import { BarChart } from '@toast-ui/chart';

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

--------------------------------

### TUI Chart Korean Guide

Source: https://github.com/nhn/tui.chart/wiki/Home

A guide for TUI Chart written in Korean.

```markdown
- [🇰🇷 한글 가이드](https://github.com/nhn/tui.chart/blob/main/docs/ko/README.md)
```

--------------------------------

### TUI Chart Live Update Options Guide

Source: https://github.com/nhn/tui.chart/wiki/Home

Documentation for configuring live updates for charts in TUI Chart.

```markdown
- [Live Update options](https://github.com/nhn/tui.chart/blob/main/docs/en/common-liveUpdate-options.md)
```