I am trying to use the Highcharts Pattern Fill library in my Vue 3 app. I've followed the instructions and the chart shows but the pattern fill does not. What am I doing wrong?
Codepen here: https://codepen.io/epatmalnieksge/pen/YzmOazG
<template>
<div id="container"></div>
</template>
<script>
import Highcharts from "https://esm.sh/highcharts";
import HighchartsPatternFill from "https://esm.sh/highcharts-pattern-fill";
HighchartsPatternFill(Highcharts);
export default {
mounted() {
Highcharts.chart("container", {
chart: {
type: "column"
},
title: {
text: "Pattern Fill Example"
},
series: [
{
data: [1, 3, 2, 4],
color: {
pattern: {
path: {
d: "M 10 0 L 0 10 M -5 5 L 5 15 M 15 -5 L 25 5",
strokeWidth: 2
},
width: 10,
height: 10
}
}
}
]
});
}
};
</script>
highcharts-pattern-fill
is deprecated legacy package for older Highchart versions. The official documentation doesn't recommend it. Instead it says that builtin module should be used:
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>
Which corresponds to this import, which is explained here:
import Highcharts from 'highcharts';
import PatternFill from 'highcharts/modules/pattern-fill';
PatternFill(Highcharts);