How to implement a Packed bubble chart?

[RosarioAleCali]

Hello, I am trying to follow this example: https://www.highcharts.com/demo/highcharts/packed-bubble but with my current setup I am getting the following error:

In my nuxt.config.js, I have the following but I know it's wrong:

highcharts: {
    modules: ["highcharts/modules/packed-bubble"],
  },

Which module should I use? This page (https://api.highcharts.com/highstock/plotOptions.bubble) is saying to use highcharts-more but I can't see it unless I am looking in the wrong place.

[richardeschloss]

Hi, I like the idea of implementing "modules" as an option in nuxt config. I only implemented it as a prop because I assumed most components would want to limit the scope of the highcharts modules. So, something like this should work:

<highchart :modules="['packed-bubble']" :options="chartOpts  />

This example shows how the modules prop is used to use the "map" module

[RosarioAleCali]

Hi, thanks for getting back to me, much appreciated!

Yeah, I guess my inexperience using highcharts and Nuxt led me yesterday to do some really weird things.

This is what I have in my template now:

<highchart
        :modules="['packed-bubble']"
        :more="true"
        :options="chartOptions"
      />

and these are my chartOptions:

const chartOptions = {
  chart: {
    type: "packedbubble",
  },
  series: [
    {
      name: "Coffee", // Coffee series
      data: [
        {
          // name property is used for the datalabel
          // value property is used for the volume of the bubble
          value: 12,
          name: "Bert",
        },
        {
          value: 5,
          name: "John",
        },
        {
          value: 10,
          name: "Sandra",
        },
        {
          value: 7,
          name: "Cecile",
        },
      ],
    },
    {
      name: "Energy drinks", // Energy drinks series
      data: [
        {
          value: 10,
          name: "Tristan",
        },
      ],
    },
    {
      name: "Tea", // Tea series
      data: [
        5,
        6,
        8,
        {
          value: 10,
          name: "Mustapha",
          color: "pink",
        },
      ],
    },
  ],
};

Although, I am not getting the same error as yesterday I am getting this one now:

Any idea what else I could be missing? Thank you for your time!

[richardeschloss]

Here are the docs for the packed bubble: https://www.highcharts.com/docs/chart-and-series-types/packed-bubble
Here is a working example: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/packed-bubble

According to the docs, the packed-bubble is provided by "highcharts-more" so that you can just specify the chart type to be "packedbubble". I.e., packedbubble is not part of the highcharts modules, so in your snipped above, you would just omit the "modules" part.

[richardeschloss]

Working "bubble chart" here: https://github.com/richardeschloss/nuxt-highcharts/blob/master/components/charts/BubbleChart.vue

Changing the type to "packedbubble" with a few tweaks should give the packedbubble chart.

[richardeschloss]

https://github.com/richardeschloss/nuxt-highcharts/blob/master/components/charts/PackedBubble.vue