@toast-ui/vue-chart

TOAST UI Chart for Vue

This is Vue component wrapping TOAST UI Chart.

🚩 Table of Contents

• Collect statistics on the use of open source
• Install
  • Using npm
• Usage
  • Load
  • Components
  • Implement
  • Props
  • Event
  • Method
• Pull Request Steps
• Contributing
• License

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" />

2. 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

• Code of Conduct
• Contributing guideline
• Commit convention

📜 License

This software is licensed under the MIT © NHN Cloud.