nuxt-highcharts

    2.0.3 • Public • Published

    nuxt-highcharts

    npm version npm License

    Highcharts for Nuxt

    📖 Release Notes

    Setup

    1. Add nuxt-highcharts dependency to your project
    • Nuxt 2.x:
    npm i nuxt-highcharts
    • Nuxt 3.x:
    npm i nuxt-highcharts@next
    • These are the module's required dependencies:

    • These are the module's optional dependencies:

      • @highcharts/map-collection - Collection of maps to use with Highmap. Please be aware of their LICENSE. This module uses it strictly for demo purposes (and is non-profit, open-source).
    1. Add nuxt-highcharts to the modules section of nuxt.config.js
    {
      modules: [
        // Simple usage
        'nuxt-highcharts',
    
        // With options
        ['nuxt-highcharts', { /* module options */ }]
      ],
      highcharts: {
        /* module options */
      }
    }

    Quick-Start Example

    1. For the impatient that "just need it to work", this is your easiest option!
    <highchart :options="chartOptions" />
    
    1. If you plan to only change the title and series data, this will update the chart faster than the previous example:
    <highchart 
      :options="chartOptions" 
      :update="['options.title', 'options.series']" 
    />
    
    1. Looking for more? The most up-to-date examples are in this git repo!. The demo uses this repo directly!

    Module Options

    Option Type Description
    chartOptions Object Default chart options to use for the highchart components. These get wired to Highcharts. Useful tip: import('highcharts/highcharts').Options to get intellisense suggestions
    exporting Boolean Enable/disable the exporting feature globally
    setOptions Object Options to use globally, that get sent to Highcharts.setOptions. For example, decimal point separator ('.' or ','). Useful tip: import('highcharts/highcharts').Options to get intellisense suggestions

    The above options can also be provided as props to the highcharts components. When provided as props, the props will be used instead. Module options are useful when you want the same feature applied globally, like exporting. Props are preferred when you only want to have those options affect individual components.

    Components

    The nuxt-highchart module adds a plugin which registers the following components:

    Name Description
    highchart The basic chart component (but still very powerful! see the demo)
    highstock The highstock chart component, shorthand for `
    highmap The highmap chart component, shorthand for `

    Props (extends and overrides module options)

    Option Type Default Description
    animation Object {} Animation options Chart.update. This is where you can specify animation duration.
    exporting Boolean `moduleOptions.exporting
    highcharts Object Highcharts The Highcharts instance to use, defaults to an instance imported by the plugin.
    map Object { mapName: 'myMapName', mapData: [world.geo.json from https://unpkg.com/@highcharts/map-collection@1.1.3/custom/world.geo.json] } Options for the Highmap chart. The mapData can be either the JSON or string pointing to the json file
    modules Array<String> Highcharts modules to load. These modules are in node_modules/highcharts/modules/*.js
    more Boolean false Enable/disable highcharts-more. Some charts, such as polar and bubble, require this to be enabled. NOTE: Highcharts library deliberately leaves out the features to avoid bloating the library. Only specify more when you want those extra features
    oneToOne Boolean true One-to-One option for Chart.update
    options Object `moduleOptions.chartOptions
    redraw Boolean true Redraw option for Chart.update
    setOptions Object moduleOptions.setOptions Options to use globally, that get sent to Highcharts.setOptions. For example, decimal point separator ('.' or ','). Useful tip: import('highcharts/highcharts').Options to get intellisense suggestions
    update Array ["options"] Contains an array of specific options to watch. Is extremely useful for speeding up the reactivity! Default: ["options"].

    The following watchers are currently supported:

    • "options": watch deep all the options' properties. Easy to use, but can impact performance.
    • "options.caption"
    • "options.series"
    • "options.subtitle"
    • "options.title"
    • "options.yAxis"
    • "options.xAxis"

    The plugin will also inject $highcharts into the current context, so that on any component, you can access the following properties:

    • $highcharts.chartTypes - various chart types
    • $highcharts.components - the components registered by the plugin

    Events

    Event Description
    chartLoaded Emitted after successfully mounting any of the above components. It will provide an instance of the chart, so should you wish to use the Highchart API directly you can using that instance.

    Run-time config

    The following run-time config variables are also available in this.$config.nuxtHighcharts:

    Variable Description
    pluginOptions The module options that were passed to the plugin
    hcModNames List of the highcharts modules you can load

    Development

    1. Clone this repository
    2. Install dependencies using yarn install or npm install
    3. Start development server using npm run dev

    License

    MIT License

    Copyright (c) Richard Schloss richard.e.schloss@protonmail.com

    Install

    npm i nuxt-highcharts

    DownloadsWeekly Downloads

    1,598

    Version

    2.0.3

    License

    MIT

    Unpacked Size

    18.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • richardeschloss