Highcharts Dashboards with Vue
To create a dashboard with Vue, please follow the steps below:
Install the Dashboards package.npm install @highcharts/dashboards
Import the Dashboards package.import * as Dashboards from '@highcharts/dashboards/dashboards';
To fully utilize the Dashboards potential, consider additional packages like Highcharts or DataGrid.
First install the package.npm install highcharts
Then import the package and the dedicated plug to connect it to the Dashboards.import * as Highcharts from 'highcharts';import HighchartsPlugin from '@highcharts/dashboards/es-modules/Dashboards/Plugins/HighchartsPlugin';HighchartsPlugin.custom.connectHighcharts(Highcharts);Dashboards.PluginHandler.addPlugin(HighchartsPlugin);
Add a div or any other HTML element where you want to render the dashboard.<div ref="dashboardContainer"></div>
Create a dashboard using the factory function
Dashboards.board. The function takes three arguments:
container- the element where the dashboard will be rendered, can be an id of the element or the direct reference to the element
options- the options object for the dashboard
isAsync- whether the dashboard should be rendered asynchronously or not - useful when using external data resources
See how it works in this basic live example.