HighCharts.js - Trying to import highstock-CodePudding

I am using highcharts.js for Vue 3. I am trying to add the highstock library but it isn't found in npm. What is the proper way to include it?

I assume it is not included because I'm getting this error:

Uncaught (in promise) Error: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=ohlc
 - missingModuleFor: ohlc

Here is an example where they import from cdn: http://jsfiddle.net/damo6174/d14ytfed/

<script src="http://code.highcharts.com/stock/highstock.js"></script>

CodePudding user response：

Example how to implement Highcharts Stock in version 3.0.0 Vue.js.

import { createApp } from "vue";
import Highcharts from "highcharts";
import Stock from "highcharts/modules/stock";
import HighchartsVue from "highcharts-vue";
import App from "./App.vue";

Stock(Highcharts);

const app = createApp(App);
app.use(HighchartsVue);
app.mount("#app");

<template>
  <Chart :options="chartOptions" :constructorType="'stockChart'" />
</template>


<script>
import { Chart } from "highcharts-vue";

export default {
  name: "App",
  components: {
    Chart,
  },
  data() {
    return {
      chartOptions: {
        series: [
          {
            data: [5, 2, 3], // sample data
          },
        ],
      },
    };
  },
};
</script>

Demo: https://codesandbox.io/s/vue3-highcharts-example-forked-j9nw9t