<div>
<CanvasChart
option={{
dataPointWidth: 20, // Adjust width as needed
dataPointMaxWidth: 22, // Slightly higher than width
innerWidth: 350,
animationEnabled: true,
axisX: {
labelFontColor: “rgba(61, 70, 90, 1)”,
labelFontSize: 10,
intervalType: “year”,
labelFormatter(label: any) {
return moment(label.value).year();
},
},
axisY: {
labelFontColor: “rgba(61, 70, 90, 1)”,
labelFontSize: 10,
gridThickness: 0,
labelFormatter(e: any) {
return priceFormatter2decimal.format(Math.abs(e.value));
},
},
legend: {
maxHeight: 20,
horizontalAlign: “left”,
verticalAlign: “left”,
cursor: “pointer”,
},
toolTip: {
shared: true,
contentFormatter: function (e: any) {
return (
“<div style=’padding:2px 4px;’>” +
“<span style=’ font-size: 10px; font-weight: 500; line-height: 14px; text-align: left; color:rgba(61, 70, 90, 1);’>Available :</span> ” +
`<span style=’ font-size: 10px; font-weight: 500; line-height: 14px; text-align: left; color:rgba(61, 70, 90, 1);’>${numberComma(
e.entries[0].dataPoint.y
)}</span> ` +
“<br />” +
“<span style=’ font-size: 10px; font-weight: 500; line-height: 14px; text-align: left; color:rgba(100, 110, 131, 1);’>Total :</span> ” +
`<span style=’ font-size: 10px; font-weight: 500; line-height: 14px; text-align: left; color:rgba(100, 110, 131, 1);’>${numberComma(
e.entries[1].dataPoint.y
)}</span>` +
“</div>”
);
},
cornerRadius: 4,
animationEnabled: true,
},
}}
seriesData={seriesData}
/>
</div>
.
