[Release News]TOAST UI Chart 4.0 is here!

🎊 TOAST UI Chart 4.0 is here! 🎊

TOAST UI Chart v3 was developed based on svg and raphael.js. We supported and were loved by a wide range of browsers from IE8 to more modern browsers. However, as time passed, raphael.js stopped updating, and we needed to find a new solution to continue building the Chart. TOAST UI Chart team removed all of the dependencies and rebuilt the entire product based on canvas from scratch in order to make the Chart lighter.

👀 What’s new?

📌 Lighter Chart

TOAST UI Chart v4.0 removed all of the dependencies including raphael.js and TOAST UI Code Snippet and replaced it with our own reactive system.

📌 Features Made Easier

responsive

The responsive option allows users to define chart options according to the changes in the chart's width or height and even manage the animation play speed.

const options = {
...
responsive: {
animation: { duration: 300 },
rules: [
{
condition: ({ width, height }) => {
// Apply the following options when the width is below 500px and the height is below 400px.
return w <= 500 && h <= 400;
},
options: {
chart: { title: '' },
legend: {
visible: false
},
exportMenu: {
visible: false
}
}
}
]
}
};

Live Update

Live Update feature can be used to update the chart according to the chart’s size when new data is added in real time. The feature that was only supported with Line Chart in TOAST UI Chart v3.x is now supported with Area, Line, Heatmap, LineArea, Column, and ColumnLine charts.

Even More Themes and Layout Configurations

In order to make the charts blend into the styles of users’ services, we are offering a wider variety of theme options than we did with v3.x. Users now have the ability to change styles like color, width, format not only for the series but also for other components like axes, legends, plots, and more!

const options = {
xAxis: {
width: 700,
height: 100
},
yAxis: {
width: 100,
height: 350,
},
legned: {
width: 200
}
};

📌 Easier Development

TOAST UI Chart v4.0 is written in TypeScript and is of the Mono-repo format that uses Lerna. Any developer who wishes to contribute to the TOAST UI Chart can understand the code through types and due to the fact that there are multiple Github issues in a single repository.

✈️ Migration Guide

Are you already using TOAST UI Chart v3.x? Then we have put together a migration guide just for you. Check out the changes by stages and apply them!

👩‍💻 What’s next?

This is not the end! There are many more features scheduled to be deployed even after the release of v4.0, stay up to date.

  • Separate Industrial-grade TOAST UI Map Chart package
  • Integrated External Datetime Library
  • Data Source for Integrating Table Type Data including HTML and CSV

📊 Chart 4.0 — Simple, Easy to Use, And It’s Beautiful!

You can try out the new charts and features via the Storybook link below.

JavaScript UI Library Open Source by http://ui.toast.com