Unable to show date labels inside cells

[snehasd8]

Below is my code
// src/components/CalendarChart.tsx
import React from "react";
import ReactECharts from "echarts-for-react";
import * as echarts from "echarts";

const generatePollDates = () => {
const polls = [
{ name: "Lok Sabha Elections", startDay: 1, endDay: 5 },
{ name: "Rajya Sabha Elections", startDay: 7, endDay: 12 },
{ name: "State Assembly Elections", startDay: 14, endDay: 18 },
{ name: "Municipal Corporation Elections", startDay: 20, endDay: 25 },
{ name: "Panchayat Elections", startDay: 27, endDay: 29 },
];
return polls.map((poll) => ({
name: poll.name,
startDate: 2024-05-${String(poll.startDay).padStart(2, "0")},
endDate: 2024-05-${String(poll.endDay).padStart(2, "0")},
}));
};

const pollDates = generatePollDates();

const CalendarChart: React.FC = () => {
const data = pollDates.flatMap((poll) => [
{
name: Starts: ${poll.name},
value: [poll.startDate, 1],
itemStyle: { color: "green" },
symbol: "circle",
symbolSize: 10,
},
{
name: Ends: ${poll.name},
value: [poll.endDate, 1],
itemStyle: { color: "red" },
symbol: "circle",
symbolSize: 10,
},
]);

const option = {
tooltip: {
trigger: "item",
formatter: (params: any) => {
return ${params.marker} ${params.name};
},
},
legend: {
data: [
{
name: "Starts",
icon: "circle",
textStyle: { color: "green" },
itemStyle: {
color: "green",
},
},
{
name: "Ends",
icon: "circle",
textStyle: { color: "red" },
itemStyle: {
color: "red",
},
},
],
top: 20,
left: "center",
textStyle: {
fontSize: 14,
},
},
calendar: [
{
top: 80,
left: "center",
orient: "horizontal",
cellSize: ["auto", "auto"],
range: "2024-05",
yearLabel: {
show: true,
},
itemStyle: {
borderWidth: 0.5,
},
cellText: {
formatter: (value: string) => {
const [year, month, day] = value.split("-");
return ${day}-${month};
},
position: "top",
show: true,
},
},
],
series: [
{
name: "Starts",
type: "scatter",
coordinateSystem: "calendar",
data: data.filter((d) => d.name.startsWith("Start")),
symbolSize: 20,
},
{
name: "Ends",
type: "scatter",
coordinateSystem: "calendar",
data: data.filter((d) => d.name.startsWith("End")),
symbolSize: 20,
},
],
};

return (
<ReactECharts
option={option}
// style={{ height: 350, width: "100%" }}
lazyUpdate={true}
className="echarts-for-echarts w-full h-[350px]"
/>
);
};

export default CalendarChart;