Patterns in Highchart vue

Question

Want to apply pattern in pie chart using highchart vuejs

Tried using in data field but nothing worked

color: 'url(#highcharts-default-pattern-0)'

EXPECTED PATTERN:

Answer 1

Highcharts patterns work in the same way in Vue as in pure JS. You need to only:

1. Load and initialize pattern-fill module:

   import Highcharts from 'highcharts';
   import patternFillInit from 'highcharts/modules/pattern-fill';
   
   patternFillInit(Highcharts);
   

2. Use one of the ways of defining patterns from docs, for example by using patternIndex property:

    series: [
      {
        ...,
        data: [
          {
            y: 1,
            color: {
              patternIndex: 0
            },
          },
          ...
        ]
      }
    ]
   

---

Live demo: https://codesandbox.io/s/highcharts-vue-demo-1-5039z3

Docs:

https://www.highcharts.com/docs/chart-design-and-style/pattern-fills

https://github.com/highcharts/highcharts-vue#importing-highcharts-modules