@toast-ui/vue-chart

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

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

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