nuxt-highcharts

nuxt-highcharts is a Nuxt module that wraps the Highcharts charting library as Vue components, giving Nuxt apps drop-in highchart, highstock, and highmap components with reactive options and module-level configuration.

What is nuxt-highcharts?

nuxt-highcharts is an open-source Nuxt module (MIT licensed) created by Richard Schloss that integrates Highcharts into Nuxt applications. It accepts standard Highcharts options objects as props and renders interactive charts in Vue components, while also injecting $highcharts into the Nuxt context for programmatic access. The module requires highcharts as a dependency and supports optional map collections from @highcharts/map-collection. It is installed via npm and configured in the modules array of nuxt.config.js.

What makes nuxt-highcharts stand out?

nuxt-highcharts stands out by pairing Nuxt module conventions with the Highcharts options API: global defaults live in nuxt.config.js, per-chart overrides come from props, and reactivity can be scoped to specific option paths. The following features are documented on its README:

• Three chart components — Registers highchart, highstock, and highmap; highstock and highmap are shorthands for <highchart :modules="['stock']" /> and <highchart :modules="['map']" />.
• Global and per-chart options — Accepts chartOptions, exporting, and setOptions as module options or component props, letting you apply defaults globally and override per chart.
• Selective reactivity — The update prop takes an array of watched paths like options.title and options.series; only those paths trigger a chart update instead of deep-watching everything.
• Module loading — The modules prop loads any file in node_modules/highcharts/modules/*.js, and the more prop enables highcharts-more for polar and bubble charts.
• Highmap support — The map prop accepts mapName and mapData (either JSON or a file path), and the optional @highcharts/map-collection package supplies map geometries.
• Chart.update passthrough — animation, oneToOne, and redraw props map directly to Highcharts' Chart.update options.
• chartLoaded event — Every component emits chartLoaded with a chart instance for direct Highcharts API access.
• Runtime configuration — Injects $highcharts (exposing chartTypes and components) and $config.nuxtHighcharts (with pluginOptions and hcModNames).

Who should use nuxt-highcharts?

nuxt-highcharts is aimed at developers who want Highcharts inside a Nuxt app without writing imperative chart initialization code. It's especially useful for:

• Nuxt developers building data-heavy pages who want to avoid hand-initializing Highcharts and instead use familiar Vue component syntax.
• Dashboard teams who need combination charts, stock charts, or geographic maps in a single Nuxt app with consistent global options.
• Highcharts users migrating to Nuxt who want a wrapper that preserves the Highcharts options API while adding Nuxt-specific module configuration and reactivity.

What can you do with nuxt-highcharts?

With nuxt-highcharts you can build interactive charts using familiar Vue syntax while keeping the full Highcharts options object as the source of truth. Typical uses:

• Dashboard builders: render line, area, column, and pie charts by passing a Highcharts options object to <highchart :options="chartOptions" />.
• Financial products: use the highstock component for time-series data with range selectors and panning, loading the stock module via the modules prop.
• Geospatial analysts: create choropleth maps with the highmap component, supplying mapData and optionally loading maps from @highcharts/map-collection.
• Performance-sensitive apps: pass :update="['options.title', 'options.series']" to watch only those parts of the options for faster chart updates.

How does nuxt-highcharts work?

nuxt-highcharts works as a Nuxt plugin that registers chart components globally. The setup flow is:

1. Install with npm i nuxt-highcharts; the highcharts package is a required dependency.
2. Add 'nuxt-highcharts' to the modules section of nuxt.config.js, optionally with module options in a highcharts key.
3. Use the provided components in any page, passing chart options as props; the module registers them globally via a plugin.

FAQ

Is nuxt-highcharts free?

Yes. The module is released under the MIT License, and the repository is open source. There are no paid tiers or subscription requirements.

What Highcharts version does nuxt-highcharts support?

The documentation specifically warns about Highcharts 11: reactive data such as this.points must be converted from a Proxy type using something like Array.from(this.points) before passing it to Highcharts, so the module works with v11 and earlier versions that follow the same options structure.

How do I update only part of a chart quickly?

Set the update prop to an array of strings such as ["options.title", "options.series"]. The deep watcher that watches all options is the default, but narrowing the paths improves performance.

Can I load Highcharts modules like stock or map?

Yes. Use the modules prop on a highchart component with an array of module names, e.g. ['stock'], or use the built-in highstock and highmap components which are shorthands for those modules.