https://gv-lastfm-playground.vercel.app/js/charts/BubbleChart.js

1let topTenArtistsData = dummyData["top_item_charts"]["top_artists"];
2
3export const renderBubbleChart = () => {
4  if (
5    dummyData["top_item_charts"] &&
6    dummyData["top_item_charts"]["top_artists"]
7  ) {
8    let topArtistsSerialData = topTenArtistsData.map((item) => {
9      return {
10        name: item.name,
11        value: item.scrobbles,
12        custom: {
13          position: item.position,
14        },
15      };
16    });
17
18    let averageValueOfTopArtistScrobbles = getAverageValue(
19      topTenArtistsData.map((item) => item.scrobbles)
20    );
21
22    const chartOptions = {
23      chart: {
24        type: "packedbubble",
25        backgroundColor: null,
26        fontFamily: "Barlow, sans-serif",
27        spacing: [0, 0, 0, 0],
28        height: viewportWidth() > 768 ? (9 / 16) * 1000 : null,
29      },
30      title: {
31        text: null,
32      },
33      tooltip: {
34        backgroundColor: null,
35        outside: false,
36        shadow: false,
37        headerFormat: null,
38        pointFormat: null,
39        followPointer: true,
40        useHTML: true,
41        borderColor: "transparent",
42        positioner: function (width, height, point) {
43          let chartHeight = this.chart.container.clientHeight;
44          let chartWidth = this.chart.container.clientWidth;
45
46          if (viewportWidth() > 768) {
47            // Desktop
48            return {
49              x: point.plotX,
50              y: point.plotY + 100,
51            };
52          } else {
53            return {
54              x: chartWidth - width,
55              y: chartHeight + 16,
56            };
57          }
58        },
59        pointFormatter: function () {
60          let point = this;
61
62          return `
63            <div class="bubble-chart-tooltip">
64              #${point.options.custom.position} ${point.name}
65              <br/>
66              <div class="bubble-chart-footer">
67                ${point.value} Scrobbles
68              <div>
69            </div>
70          `;
71        },
72
73        style: {
74          color: "#FFC641",
75        },
76      },
77      credits: {
78        enabled: false,
79      },
80      legend: {
81        enabled: false,
82      },
83      plotOptions: {
84        packedbubble: {
85          animation: true,
86          layoutAlgorithm: {
87            enableSimulation: false,
88            maxSpeed: 0.2,
89            maxIterations: 1000,
90          },
91          cursor: "pointer",
92          color: "url(#diagonalHatch)",
93          minSize: "30%",
94          maxSize: "120%",
95          draggable: false,
96          dataLabels: {
97            enabled: true,
98            format: "{point.name}",
99            filter: {
100              property: "y",
101              operator: ">",
102              value: averageValueOfTopArtistScrobbles,
103            },
104            style: {
105              color: "#FFC641",
106              textOutline: "none",
107              fontWeight: "normal",
108              fontSize: viewportWidth() > 768 ? "18px" : "12px",
109            },
110          },
111          marker: {
112            fillOpacity: 0.3,
113            lineColor: "transparent",
114            states: {
115              hover: {
116                enabled: false,
117              },
118            },
119          },
120        },
121      },
122      series: [
123        {
124          point: {
125            events: {
126              mouseOver() {
127                if (this.dataLabel) {
128                  this.dataLabel.element.style.fill = "#000";
129                  this.dataLabel.element.firstChild.style.fill = "#000";
130                }
131              },
132              mouseOut() {
133                if (this.dataLabel) {
134                  this.dataLabel.element.style.fill = "#FFC641";
135                  this.dataLabel.element.firstChild.style.fill = "#FFC641";
136                }
137              },
138            },
139          },
140          data: topArtistsSerialData,
141        },
142      ],
143    };
144    Highcharts.chart("top-ten-artists-bubble-chart", chartOptions);
145  }
146};