Unable to plot the values on Y-axis for the HeatMap

[Vivek-PawarCG]

I am using react-apexchart to plot a HeatMap which will be showing the HTTP Server Request counts from Prometheus.
So the basic Idea is I have some api requests for which I need to view the request counts on a heatmap. Thus I tried using the ApexChart HeatMap for which iI received below output.

As you can see the xaxis gives the time-range while on y axis I needed the APIs so as to divide the counts as per the APIs and time-range and get a HeatMap chart output.

For this I did the following :
<ReactApexChart series={[{ data: values, name: null }]} options={{ chart: { height: 500, }, plotOptions: { heatmap: { distributed: true, enableShades: true, colorScale: { ranges: [ { from: minVal, to: maxVal, name: 'Low', color: '#f27311', }, { from: maxVal, to: Infinity, name: 'High', color: '#c90f08', }, { from: -Infinity, to: minVal, name: 'Normal', color: '#0fa63a', }, ], }, }, }, dataLabels: { enabled: true, }, xaxis: { categories: timeValues, labels: { style: { colors: 'black', fontSize: '12px', }, }, }, yaxis: { categories: api, labels: { style: { colors: 'green', }, }, }, }} type="heatmap" height={400} />

As you can see I gave the Categories in X-axis as timeValues which will fetch the time and in Y-axis api which will fetch those api names, but unable to see the api names in the chart.

[dust63]

You need to set add a serie for each API name.