Skip to content

xlsdg/vue-highcharts-v5

Repository files navigation

vue-highcharts-v5

Vue.js(v2.x+) component wrap for HighCharts.js(v6.x+)

Installation

$ npm install --save highcharts vue-highcharts-v5

Usage

  1. Change webpack config

    For webpack 1.x:

          {
            test: /\.js$/,
            loader: 'babel',
            include: [
    -          path.join(prjRoot, 'src')
    +          path.join(prjRoot, 'src'),
    +          path.join(prjRoot, 'node_modules/vue-highcharts-v5/src')
            ],
    -        exclude: /node_modules/
    +        exclude: /node_modules(?![\\/]vue-highcharts-v5[\\/]src[\\/])/
          },

    For webpack 2.x+:

          {
            test: /\.js$/,
            loader: 'babel-loader',
    -       include: [resolve('src'), resolve('test')]
    +       include: [resolve('src'), resolve('test'), resolve('node_modules/vue-highcharts-v5/src')]
          }
  2. Import HighCharts

    <template>
      <div class="highcharts">
        <IHighCharts
          :options="options"
          :loading="loading"
          :resizable="true"
          @load="onLoad"
          @resize="onResize"
        />
      </div>
    </template>
    
    <script type="text/babel">
      import IHighCharts from 'vue-highcharts-v5/src/HighCharts.js';
      export default {
        name: 'demo',
        components: {
          IHighCharts
        },
        data: () => ({
          loading: true,
          options: {}
        }),
        methods: {
          onLoad(instance, HighCharts) {
            console.log(instance, HighCharts);
          },
          onResize(width, height) {
            console.log(width, height);
          }
        }
      };
    </script>
    
    <style scoped>
      .highcharts {
        width: 400px;
        height: 400px;
      }
    </style>
  3. Import HighMaps

    <template>
      <div class="highcharts">
        <IHighCharts
          :options="options"
          :loading="loading"
          :resizable="true"
          @load="onLoad"
          @resize="onResize"
        />
      </div>
    </template>
    
    <script type="text/babel">
      import IHighCharts from 'vue-highcharts-v5/src/HighMaps.js';
      export default {
        name: 'demo',
        components: {
          IHighCharts
        },
        data: () => ({
          loading: true,
          options: {}
        }),
        methods: {
          onLoad(instance, HighCharts) {
            console.log(instance, HighCharts);
          },
          onResize(width, height) {
            console.log(width, height);
          }
        }
      };
    </script>
    
    <style scoped>
      .highcharts {
        width: 400px;
        height: 400px;
      }
    </style>
  4. Import HighStock

    <template>
      <div class="highcharts">
        <IHighCharts
          :options="options"
          :loading="loading"
          :resizable="true"
          @load="onLoad"
          @resize="onResize"
        />
      </div>
    </template>
    
    <script type="text/babel">
      import IHighCharts from 'vue-highcharts-v5/src/HighStock.js';
      export default {
        name: 'demo',
        components: {
          IHighCharts
        },
        data: () => ({
          loading: true,
          options: {}
        }),
        methods: {
          onLoad(instance, HighCharts) {
            console.log(instance, HighCharts);
          },
          onResize(width, height) {
            console.log(width, height);
          }
        }
      };
    </script>
    
    <style scoped>
      .highcharts {
        width: 400px;
        height: 400px;
      }
    </style>

propTypes

{
  styles: {
    type: Object,
    required: false,
    default: () => ({
      width: '100%',
      height: '100%'
    })
  },
  theme: {
    type: Object,
    required: false
  },
  options: {
    type: Object,
    required: true
  },
  loading: {
    type: [Boolean, String],
    required: false,
    default: false
  },
  resizable: {
    type: Boolean,
    required: false,
    default: false
  }
}

Demo

vue-highcharts-v5-demo

License

MIT