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

1let colors = [
2  "#6ABDCB",
3  "#5AA9C6",
4  "#4A94C1",
5  "#397FBB",
6  "#2A6CB6",
7  "#1955B0",
8  "#FA4B4B",
9  "#CD4D60",
10  "#A64F71",
11  "#835080",
12  "#5E5291",
13  "#3D53A0",
14];
15
16let tags = dummyData["monthly_top_tags"];
17let genres = [];
18
19let topTag = dummyData.top_tags[0][0].name;
20if (tags) {
21  document.getElementById("topTagMobile").innerHTML = topTag;
22  document.getElementById("topTag").innerHTML = topTag;
23}
24
25let processData = () => {
26  tags.forEach((month) => {
27    month.forEach((genre) => {
28      if (!genres.includes(genre.name)) {
29        genres.push(genre.name);
30      }
31    });
32  });
33
34  let someData = [];
35  genres.forEach((genreName) => {
36    let genreData = {
37      name: genreName,
38      data: [],
39    };
40
41    tags.forEach((month) => {
42      var genreScore = 0;
43
44      month.forEach((genre) => {
45        if (genre.name === genreName) {
46          genreScore = genre.score;
47        }
48      });
49
50      genreData.data.push(genreScore);
51    });
52
53    someData.push(genreData);
54  });
55
56  return someData.map((item) => {
57    let total = item.data.reduce((partialSum, a) => partialSum + a, 0);
58    return {
59      total: total,
60      ...item,
61    };
62  });
63};
64
65let chartOptions = {
66  chart: {
67    type: "area",
68    margin: [0, 0, 30, 0],
69    spacing: [0, 0, 30, 0],
70    backgroundColor: "transparent",
71    fontFamily: "Barlow, sans-serif",
72    height: 370,
73    maxPadding: 0,
74    scrollablePlotArea: {
75      minWidth: 1033,
76    },
77    zooming: {
78      enabled: false,
79    },
80  },
81  colors: colors,
82  title: null,
83  legend: {
84    enabled: false,
85  },
86  credits: {
87    enabled: false,
88  },
89  tooltip: {
90    enabled: true,
91    backgroundColor: null,
92    outside: false,
93    shadow: false,
94    headerFormat: null,
95    pointFormat: null,
96    followPointer: true,
97    useHTML: true,
98    borderColor: "transparent",
99    pointFormatter: function () {
100      let point = this;
101      return `<span class="stacked-area-chart-tooltip" style="fill: ${point.color}; background-color: ${point.color}">
102          ${point.series.name}
103        </span>
104      `;
105    },
106    headerFormat: null,
107    followPointer: true,
108    borderColor: "transparent",
109    style: {
110      color: "#fff",
111      opacity: 1,
112    },
113  },
114  yAxis: {
115    visible: false,
116    startOnTick: false,
117    endOnTick: false,
118    maxPadding: 0,
119  },
120  xAxis: {
121    type: "datetime",
122    minPadding: 0,
123    maxPadding: 0,
124    crosshair: false,
125    categories: [
126      "Jan",
127      "Feb",
128      "Mar",
129      "Apr",
130      "May",
131      "Jun",
132      "Jul",
133      "Aug",
134      "Sep",
135      "Oct",
136      "Nov",
137      "Dec",
138    ],
139    labels: {
140      align: "center",
141      padding: 0,
142      rotation: 0,
143      reserveSpace: true,
144    },
145    lineWidth: 0,
146    tickWidth: 0,
147  },
148  plotOptions: {
149    area: {
150      cursor: "pointer",
151      trackByArea: true,
152      lineWidth: 0,
153      fillOpacity: 0.8,
154      lineColor: "transparent",
155    },
156    series: {
157      marker: {
158        enabled: false,
159        states: {
160          hover: {
161            enabled: false,
162          },
163        },
164      },
165      label: {
166        minFontSize: 12,
167        maxFontSize: 16,
168        enabled: true,
169        useHTML: true,
170        style: {
171          color: "#fff",
172        },
173      },
174      stacking: "normal",
175    },
176  },
177  series: processData(),
178};
179
180export const renderStackedAreaChart = () => {
181  if (tags) {
182    Highcharts.chart("stackedAreaChart", chartOptions);
183  }
184};