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

1const topTracks = dummyData.top_item_charts
2  ? dummyData.top_item_charts.top_tracks
3  : null;
4
5export const renderTopTracks = () => {
6  if (topTracks) {
7    const seriesData = topTracks.map((track) => {
8      return {
9        name: track.name,
10        data: [track.scrobbles],
11        extra_data: {
12          artist: track.artist,
13          primary_album: track.primary_album,
14        },
15      };
16    });
17    Highcharts.chart("top-tracks", {
18      chart: {
19        type: "bar",
20        backgroundColor: "transparent",
21        spacing: [0, 0, 0, 0],
22        height: null,
23      },
24      colors: [
25        "rgba(70, 157, 248, 1)",
26        "rgba(70, 157, 248, 0.8)",
27        "rgba(70, 157, 248, 0.6)",
28        "rgba(70, 157, 248, 0.4)",
29        "rgba(70, 157, 248, 0.2)",
30      ],
31      title: {
32        text: "",
33      },
34      credits: {
35        enabled: false,
36      },
37      xAxis: {
38        crosshair: false,
39        visible: false,
40      },
41      yAxis: {
42        min: 0,
43        max: seriesData[0].data[0],
44        visible: false,
45        endOnTick: false,
46      },
47      legend: {
48        enabled: false,
49      },
50      tooltip: {
51        enabled: false,
52      },
53      plotOptions: {
54        bar: {
55          cursor: "pointer",
56          pointPadding: 0,
57          borderWidth: 0,
58          borderColor: "transparent",
59          borderRadius: 0,
60          groupPadding: 0,
61        },
62        series: {
63          dataLabels: {
64            useHTML: true,
65            enabled: true,
66            style: {fontWeight: "bolder"},
67            inside: true,
68            align: "left",
69            rotation: 0,
70            allowOverlap: true,
71            formatter: function () {
72              return `
73                <div class="top-tracks-data-label">
74                  <div class="img-wrap">
75                    <img
76                      class="top-tracks-data-label-image"
77                      src="${getImageUrl(
78                        seriesData[this.series._i].extra_data.primary_album,
79                        seriesData[this.series._i].extra_data.artist,
80                        null,
81                        "no_track_fallback.jpg",
82                        true
83                      )}"
84                    ></img>
85                  </div>
86                  <div class='text-wrap-container'>
87                    <div class='label-text-wrap'>
88                      <h1>#${this.series._i + 1} ${
89                        seriesData[this.series._i].name
90                      }</h1>
91                      <h2>${
92                        seriesData[this.series._i].extra_data.artist.name
93                      } • ${seriesData[this.series._i].data} scrobbles</h2>
94                    </div>
95                  </div>
96                </div>
97              `;
98            },
99          },
100        },
101      },
102      series: seriesData.slice(0, 5),
103    });
104  }
105};