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

If you want to use barChart, insert <bar-chart> in the template or html. data prop is required.

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

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

Type	Required
Object	O

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

Type	Required
Object	X

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

Type	Required
Object	X

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

eventName	Details
`clickLegendLabel`	Triggered when the legend's label area is clicked.
`clickLegendCheckbox`	Triggered when the legend's checkbox area is clicked.
`selectSeries`	Triggered when the series is selected. Requires `options.series.selectable: true`.
`unselectSeries`	Triggered when the series is unselected. Requires `options.series.selectable: true`.
`hoverSeries`	Triggered when the mouse hovers over a series.
`unhoverSeries`	Triggered when the mouse leaves the series after the `hoverSeries` event.
`zoom`	Triggered when zoomed. Requires `options.series.zoomable: true`.
`resetZoom`	Triggered 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

FAQs

What is @toast-ui/vue-chart?

Is @toast-ui/vue-chart popular?

Is @toast-ui/vue-chart well maintained?

Last updated on 27 Apr 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@toast-ui/vue-chart

TOAST UI Chart for Vue

🚩 Table of Contents

Collect statistics on the use of open source