Nomnom Pumpernickle Muffins

    @toast-ui/vue-chart

    4.4.3 • Public • Published

    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

    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

    This software is licensed under the MIT © NHN Cloud.

    Keywords

    none

    Install

    npm i @toast-ui/vue-chart

    DownloadsWeekly Downloads

    160

    Version

    4.4.3

    License

    MIT

    Unpacked Size

    38.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • nhnent
    • codepink