ERROR Error: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=vbp -missingModuleFor: vbp. I have imported the required modules

Question

I'm trying to use volume-by-price of highchart in my angular project. I have checked if the current version of highcharts installed supports the vbp and it does support. I have installed the highcharts angular and highcharts and imported as mentioned in the documentation. The steps i have followed is from this link(https://www.npmjs.com/package/highcharts-angular#installing).Since I'm using it in searching.components.ts, I have used it in that component and also imported the other modules required import 'highcharts/indicators/indicators'; import 'highcharts/indicators/volume-by-price'; and checked in my indicators whether volume-by-price.ts is present. It is included in the path provided and vbp is already present and it automatically came when i was typing the 'type' in 'series'. and it shows the error: core.mjs:7473 ERROR Error: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=vbp - missingModuleFor: vbp at Object.<anonymous> (highstock.js:8:138) at C (highstock.js:8:2591) at r (highstock.js:8:61) at k.initSeries (highstock.js:8:195150) at highstock.js:8:210174 at Array.forEach (<anonymous>) at k.firstRender (highstock.js:8:210152) at k.<anonymous> (highstock.js:8:195068) at C (highstock.js:8:2591) at k.init (highstock.js:8:194486) . My complete code in searching.component.ts (have included these lines at the top: import * as Highcharts from 'highcharts/highstock'; import 'highcharts/indicators/indicators'; import 'highcharts/indicators/volume-by-price';). I have used this in my typescript(searching.component.ts):

    series: [{
    type: 'candlestick',
    name: 'CAST',
    id: 'cast',
    zIndex: 2,
    data: ohlc
    }, 
    {
    type: 'column',
    name: 'Volume',
    id: 'volume',
    data: volume,
    yAxis: 1,
    threshold: null ,
    pointRange: 1,
    pointWidth: 5
    },{
    type :'vbp',
    linkedTo: 'cast',
    params: {
    volumeSeriesID: 'volume'
    },
    dataLabels:
    {
    enabled: false
    }
    }]  

and the below code is present in a function when user clicks on charts, the function getDetails() is called and getDetails() has this code:

Highcharts.stockChart('containerChart',
{ 
rangeSelector: { selected: 1 }, 
title: { text: 'SMA' }, 
subtitle: { text: 'With SMA and Volume by Price technical indicators' }, 
xAxis: { type:'datetime' }, 
yAxis: [{ startOnTick: false, endOnTick: false,
   labels: {
        align: 'right',
        format: '{value:.2f}',
        x: -3
    },
    title: {
        text: 'OHLC'
    },
   height: '60%',
    lineWidth: 2,
    resize: {
        enabled: true
    },
    tickPositions: (() => {
      const ohlcValues = ohlc.map(point => [point[2], point[3]]).flat(); // Assuming point[2] is high and point[3] is low for each point
      const min = Math.min(...ohlcValues);
      const max = Math.max(...ohlcValues);
      let positions = [];
      let interval = (max - min) / 5; // Adjust the number of ticks by changing the divisor
  
      for (let i = min; i <= max; i += interval) {
          positions.push(parseFloat(i.toFixed(2))); // Adding toFixed to handle floating-point precision
      }
  
      console.log("Min:", min, "Max:", max, "Tick positions:", positions);
      return positions;
    })(),
}, {
    labels: {
        align: 'right',
        x: -3,
        formatter: function() {
          return (+(this.value) / 1e6) + 'M'; }
    },
    title: {
        text: 'Volume'
    },
    tickPositions: [0, 50e6, 100e6, 150e6],
    top: '65%',
    height: '35%',
    offset: 0,
    lineWidth: 2,
}],
tooltip: {
    split: true
},
plotOptions: {
  series: {
    dataGrouping: {
        enabled: false, 
    }
},
column: {
    pointPadding: 0,
    groupPadding: 0,
    borderWidth: 0,
    shadow: false,
    pointWidth: 3, 
}, },
series: [{
    type: 'candlestick',
    name: 'CAST',
    id: 'cast',
    zIndex: 2,
    data: ohlc
}, {
    type: 'column',
    name: 'Volume',
    id: 'volume',
    data: volume,
    yAxis: 1,  
    threshold: null ,
    pointRange: 1,
    pointWidth: 5
},{
  type :'vbp',
  linkedTo: 'cast',
  params: {
    volumeSeriesID: 'volume'
  },
  dataLabels:
  {
    enabled: false
  }
}
  ] });

Could you please let me know if I have to include any other modules or can I implement vbp in any other way?

Answer 1

You need to correctly import and initialize Highstock, indicators and volume-by-price modules.

For example:

import * as Highcharts from 'highcharts/highstock';
import indicators from 'highcharts/indicators/indicators';
import volumeByPrice from 'highcharts/indicators/volume-by-price';

indicators(Highcharts);
volumeByPrice(Highcharts);

---

Live demo: https://stackblitz.com/edit/highcharts-angular-line-cmca2i

Docs: https://github.com/highcharts/highcharts-angular?tab=readme-ov-file#to-load-a-module