Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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>
Tags:

2

Answers


  1. 0

    To include the pattern-fill module in Highcharts, you can load it directly from the following URL:

    https://code.highcharts.com/modules/pattern-fill.src.js
    Login or Signup to reply.
  2. 0

    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);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search