0

Created a web component using LitElement and created a columnrange chart using highcharts in that, now I want to add the border radius only to the top left and top right corners of the bar, and for that, I installed highcharts-border-radius external plugin to give borderRadiusTopLeft and borderRadiusTopRight, but I am not able to import this plugin in the component. After importing it, getting an error that Highcharts is not defined.

Tried importing like:

import "highcharts-border-radius";

I also tried using the following:

const borderRadius = require("highcharts-border-radius");

borderRadius(Highcharts);

When using the second approach, then got an error that ReferenceError: require is not defined.

Any help importing this external plugin in the LIT element would be appreciated.

Sushil Dubey
  • 33
  • 7
  • How are you loading the base `highcharts`? It seems the side-effect import expects `Highcharts` to be present in global/window. You can't use `require` in the browser. – Augustine Kim Nov 28 '22 at 21:51
  • @AugustineKim I am importing base highcharts like: `import Highcharts from 'highcharts/es-modules/masters/highcharts.src.js';` – Sushil Dubey Nov 28 '22 at 22:02

1 Answers1

0

It appears while the base highcharts package has ES module exports, the plugin highcharts-border-radius does not.

To use the plugin in a browser environment as is, you'll just have to make sure Highcharts is installed globally.

One way to do this is to also utilize the UMD version of highcharts

import 'highcharts';
import 'highcharts-border-radius';

Highcharts.chart(...)
Augustine Kim
  • 841
  • 1
  • 5