javascriptvue.jshighcharts

Highcharts chart is showing but Highcharts Pattern Fill library is not working


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>


Solution

  • 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);