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;