Need help with tui.chart?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

nhn
5.0K Stars 294 Forks MIT License 368 Commits 6 Opened issues

Description

🍞📊 Beautiful chart for data visualization.

Services available

!
?

Need anything else?

Contributors list

Toast UI Chart

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

GitHub release npm GitHub license PRs welcome code with hearth by NHN lerna

📦 Packages

The functionality of TOAST UI Chart is available when using the Plain JavaScript, React, Vue Component.

📙 Documents

😍 Why TOAST UI Chart?

Simple, Easy to Use, And It's Beautiful!

TOAST UI Chart makes your data pop and presents it in a manner that is easy to understand. Furthermore, it provides a wide range of theme options for customizing the charts to be suitable for all of your services. Chart components like the title, axes, legends, tooltips, plots, series, and more can be customized through the options.

image

Variety of powerful features!

Responsive

Add different options and animations according to the charts' sizes by using the responsive option.

responsive

Zoomable

Make the data presented in the Line, Area, and Treemap Charts zoomable with the zoomable option.

zoomable

Live Update

View and manage new data as they are added realtime with the

addData
API and the
options.series.shift
option.

| Area | Line | Heatmap | |--- | --- | --- | | area | live update line | heatmap |

| LineArea | Column | ColumnLine | |--- | --- | --- | | lineArea | column | columnline |

Synchronize Tooltip

Use and synchronize the tooltip features at the moment the cursor hovers over the chart with the

showTooltip
API and the
on
custom event.

synctooltip

🎨 Features

Charts

The TOAST UI Chart provides many types of charts to visualize the various forms of data.

| Area | Line | Bar | Column | | ------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | area chart | line chart | bar chart | column chart |

| Bullet | BoxPlot | Treemap | Heatmap | | ------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | bullet chart | boxplot chart | treemap chart | heatmap chart |

| Scatter | Bubble | Radar | Pie | | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | | scatter chart | bubble chart | radar chart | pie chart |

| LineArea | LineScatter | ColumnLine | NestedPie | | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | lineArea chart| lineScatter chart | columnLine chart | nestedPie chart |

| RadialBar | Gauge | | | | --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | radialBar chart | gauge chart | coming soon | next |

In addition, a variety of powerful features can be found on the demo page below. 👇👇👇

🐾 Examples

Here are more examples and play with TOAST UI Chart!

🔧 Pull Request Steps

TOAST UI products are open source, so you can create a pull request(PR) after you fix issues. Run npm scripts and develop yourself with the following process.

Setup

Fork

main
branch into your personal repository. Clone it to local computer. Install node modules. Before starting development, you should check to have any errors.
$ git clone https://github.com/{your-personal-repo}/tui.chart.git
$ npm install
$ cd apps/chart
$ npm install
$ npm run test

Develop

Let's start development! You can develop UI through webpack-dev-server or storybook, and you can write tests through Jest. Don't miss adding test cases and then make green rights.

Run webpack-dev-server

$ npm run serve

Run storybook

$ npm run storybook

Run test

$ npm run test

Pull Request

Before PR, check to test lastly and then check any errors. If it has no error, commit and then push it!

For more information on PR's step, please see links of Contributing section.

💬 Contributing

🌏 Browser Support

| Chrome Chrome | IE Internet Explorer | Edge Edge | Safari Safari | Firefox Firefox | | :--------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------: | | Yes | 10+ | Yes | Yes | Yes |

🍞 TOAST UI Family

🚀 Used By

📜 License

This software is licensed under the MIT © NHN.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.