npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nuxt-highcharts

v3.1.1

Published

Highcharts for Nuxt

Downloads

10,316

Readme

nuxt-highcharts

npm version npm License

Highcharts for Nuxt

📖 Release Notes

Setup

  1. Add nuxt-highcharts dependency to your project
npm i nuxt-highcharts

NOTE: if working with highcharts 11, you need to remember to convert your data from the Proxy type to a type supported by Highcharts. For example, if you have reactive data this.points, you'll need to set the Highcharts data with something like: Array.from(this.points)

  • 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 <highchart :modules="['stock']" /> | | 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 || false |Enable/disable the exporting feature globally | | highcharts | Object | Highcharts | The Highcharts instance to use, defaults to an instance imported by the plugin. | map | Object | { mapName: 'myMapName', mapData: [you provide this, see examples] } | 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 || {} | Default chart options to use for the highchart components. These get wired to Highcharts. Useful tip: import('highcharts/highcharts').Options to get intellisense suggestions | | 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 [email protected]