jsill2786
Posts: 1
Joined: Tue May 31, 2022 8:37 am

How to use mappie with Vue in latest version of highchart?

Hi

I'm using Vuejs version 2.0 and highchart version 10.1.0.

I tried to use mappie in HighChart version 10.1.0, but an error occurred saying that mappie was not supported.

So, referring to
https://codesandbox.io/s/vue-template-q ... /mappie.js

I made mappie.js and declared mappie in main.js.

However, mappie did not appear in the highchart version 10.1.0.

So I lowered the highchart version to 9.2.0 and tried it again, then it worked.
But I want to use mappie in highchart version 10.1.0.

Also refer to this article.
viewtopic.php?t=47746&p=172445

I wonder if there is another mappie.js supported by the highchart version 10.1.0 and how to use it.

This is the mappie.js I wrote.

Code: Select all

export default function (Highcharts) {
  // New map-pie series type that also allows lat/lon as center option.
  // Also adds a sizeFormatter option to the series, to allow dynamic sizing
  // of the pies.
  Highcharts.seriesType(
    'mappie',
    'pie',
    {
      center: null, // Can't be array by default anymore
      clip: true, // For map navigation
      states: {
        hover: {
          halo: {
            size: 5
          }
        }
      },
      dataLabels: {
        enabled: false
      }
    },
    {
      getCenter: function () {
        let options = this.options
        let chart = this.chart
        let name = options.name
        let countryPoint = chart.get(name)
        let slicingRoom = 2 * (options.slicedOffset || 0)

        if (!options.center) {
          options.center = [null, null] // Do the default here instead
        }

        // Replace lat/lon with plotX/plotY
        if (options.center.plotX !== undefined) {
          options.center = [countryPoint.plotX, countryPoint.plotY]
        }

        // Handle dynamic size
        if (options.sizeFormatter) {
          options.size = options.sizeFormatter.call(this)
        }
        // Call parent function
        let result = Highcharts.seriesTypes.pie.prototype.getCenter.call(this)
        // Must correct for slicing room to get exact pixel pos
        result[0] -= slicingRoom
        result[1] -= slicingRoom
        return result
      },
      translate: function (p) {
        this.options.center = this.userOptions.center
        this.center = this.getCenter()
        return Highcharts.seriesTypes.pie.prototype.translate.call(this, p)
      }
    }
  )
}
help me please.... T_T

best regards
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: How to use mappie with Vue in latest version of highchart?

Hello,

Welcome to our forum and thanks for contacting us with your question!

In version 10.1.0, the maps have undergone some changes, so this example does not work properly. Some time ago, a new feature was added that makes it easier to add pie charts to maps and has already been merged with the GitHub master, here you can read more about it: https://github.com/highcharts/highcharts/pull/16783

This feature will appear in the latest version and at the moment you can use it by downloading the library from GitHub as in the demo below.

Demo: https://jsfiddle.net/BlackLabel/nq8cko15/
Issues: https://github.com/highcharts/highcharts/issues/12526

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Maps”