Exciting news!Announcing our $4.6M Series Seed. Learn more →
Socket
LoveBlogFAQ
Install
Log in

@toast-ui/vue-chart

Package Overview
Dependencies
1
Maintainers
2
Versions
30
Issues
File Explorer

Advanced tools

@toast-ui/vue-chart

TOAST UI Chart for Vue

    4.4.3latest

Version published
Maintainers
2
Yearly downloads
14,940
decreased by-69.98%

Weekly downloads

Readme

Source

TOAST UI Chart for Vue

This is Vue component wrapping TOAST UI Chart.

npm version

🚩 Table of Contents

Collect statistics on the use of open source

Vue Wrapper of 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 options when declare Vue Wrapper component.

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

💾 Install

Using npm

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

📊 Usage

Load

You can use TOAST UI Chart for Vue as module format or namespace. When using module format, you should load toastui-chart.min.css in the script.

  • Using ECMAScript module
import '@toast-ui/chart/dist/toastui-chart.min.css'; import { barChart, lineChart } from '@toast-ui/vue-chart';
  • Using Commonjs module
require('@toast-ui/chart/dist/toastui-chart.min.css'); const toastui = require('@toast-ui/vue-chart'); const barChart = toastui.barChart; const lineChart = toastui.lineChart;
  • Using namespace
const barChart = toastui.barChart; const lineChart = toastui.lineChart;

Components

You can use all kinds of charts in TOAST UI chart. Vue Components for each chart types are:

  • areaChart
  • lineChart
  • barChart
  • boxPlotChart
  • bubbleChart
  • bulletChart
  • columnChart
  • columnLineChart
  • heatmapChart
  • lineAreaChart
  • lineScatterChart
  • nestedPieChart
  • pieChart
  • radarChart
  • scatterChart
  • treemapChart

Implement

  1. If you want to use barChart, insert <bar-chart> in the template or html. data prop is required.
<bar-chart :data="chartData" />
  1. Load chart component and then add it to the components in your component or Vue instance.
import '@toast-ui/chart/dist/toastui-chart.min.css'; import { barChart } from '@toast-ui/vue-chart'; export default { components: { 'bar-chart': barChart, }, data() { return { chartData: { // for 'data' prop of 'bar-chart' categories: ['July', 'Aug', 'Sep', 'Oct', 'Nov'], series: [ { name: 'Budget', data: [3000, 5000, 7000, 6000, 4000], }, { name: 'Income', data: [1000, 7000, 2000, 5000, 3000], }, ], }, }; }, };

Props

You can use data, options, style props for initialize TOAST UI chart.

data

TypeRequired
ObjectO

This prop is for data of the chart. When you change data, chart is rendering for changing data.

For more information, see data of each type chart in TOAST UI chart document.

TOAST UI Chart has its own reactivity system, and does not use the reactivity system of Vue. So, instead of adding props in the data, declare props in the created lifecycle method.

<template> <line-chart :data="chartProps.data" /> </template> <script> import '@toast-ui/chart/dist/toastui-chart.min.css'; import { lineChart } from '@toast-ui/vue-chart'; export default { name: 'LineChart', components: { 'line-chart': lineChart, }, created() { this.chartProps = { data: { categories: ['2020', '2021', '2022', '2023'], series: [ { name: 'Seoul', data: [-3.5, -1.1, 4.0, 11.3], }, { name: 'Seattle', data: [3.8, 5.6, 7.0, 9.1], }, { name: 'Sydney', data: [22.1, 22.0, 20.9, 18.3], }, { name: 'Moskva', data: [-10.3, -9.1, -4.1, 4.4], }, { name: 'Jungfrau', data: [-13.2, -13.7, -13.1, -10.3], }, ], }, }; }, }; </script>

options

TypeRequired
ObjectX

This prop is for options of TOAST UI chart and used for initialize TOAST UI chart.

TOAST UI Chart has its own reactivity system, and does not use the reactivity system of Vue. So, instead of adding props in the data, declare props in the created lifecycle method.

<template> <line-chart :data="chartProps.data" :options="chartProps.options" /> </template> <script> import '@toast-ui/chart/dist/toastui-chart.min.css'; import { lineChart } from '@toast-ui/vue-chart'; export default { name: 'LineChart', components: { 'line-chart': lineChart, }, created() { this.chartProps = { data: { // ... }, options: { chart: { width: 500, height: 540, title: '24-hr Average Temperature', }, yAxis: { title: 'Temperature (Celsius)', pointOnColumn: true, }, xAxis: { title: 'Years', }, series: { showDot: false, zoomable: true, }, }, }; }, }; </script>

style

TypeRequired
ObjectX

This prop is for chart container style and used for initialize TOAST UI chart. To use responsive layout, the width or height of the container must be specified as a value such as "%" or "vh", "vw".

<template> <line-chart :data="chartProps.data" :options="chartProps.options" :style="chartProps.containerStyle" /> </template> <script> import '@toast-ui/chart/dist/toastui-chart.min.css'; import { lineChart } from '@toast-ui/vue-chart'; export default { name: 'LineChart', components: { 'line-chart': lineChart, }, created() { this.chartProps = { data: { // ... }, options: { // ... }, containerStyle: { width: '60vw', height: '70vh', }, }; }, }; </script>

Event

eventNameDetails
clickLegendLabelTriggered when the legend's label area is clicked.
clickLegendCheckboxTriggered when the legend's checkbox area is clicked.
selectSeriesTriggered when the series is selected. Requires options.series.selectable: true.
unselectSeriesTriggered when the series is unselected. Requires options.series.selectable: true.
hoverSeriesTriggered when the mouse hovers over a series.
unhoverSeriesTriggered when the mouse leaves the series after the hoverSeries event.
zoomTriggered when zoomed. Requires options.series.zoomable: true.
resetZoomTriggered when zoom is reset. Requires options.series.zoomable:true.
  • Example :
<template> <bar-chart :data="chartData" @clickLegendLabel="onClickLegendLabel" @clickLegendCheckbox="onClickLegendCheckbox" @selectSeries="onSelectSeries" @unselectSeries="onUnselectSeries" @hoverSeries="onHoverSeries" @unhoverSeries="onUnhoverSeries" @zoom="onZoom" @resetZoom="onResetZoom" /> </template> <script> import '@toast-ui/chart/dist/toastui-chart.min.css'; import { barChart } from '@toast-ui/vue-chart'; export default { name: 'BarChart', components: { 'bar-chart': barChart, }, data() { return { chartData: { // ... omit }, }; }, methods: { onClickLegendLabel() { // implement your code }, onClickLegendCheckbox() { // implement your code }, onSelectSeries() { // implement your code }, onUnselectSeries() { // implement your code }, onHoverSeries() { // implement your code }, onUnhoverSeries() { // implement your code }, onZoom() { // implement your code }, onResetZoom() { // implement your code }, }, }; </script>

Method

For use method, first you need to assign ref attribute of element like this:

<bar-chart ref="tuiChart" :data="chartData" />

After then, you can use methods through this.$refs. We provide invoke method. You can use invoke method to call the method of tui.chart. First argument of invoke is name of the method and second argument is parameters of the method.

this.$refs.tuiChart.invoke('resize', { width: 500, height: 500, });

For more information of method, see method of 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 develop 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}/[[repo name]].git $ cd [[repo name]] $ npm install

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

📜 License

This software is licensed under the MIT © NHN Cloud.

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc