[Feature] fontFamily #21388
Description
What problem does this feature solve?
Next.js with next/font/local to load my font.
I want to know the best practice to make ECharts render text (titles, legend, labels, tooltips) using my custom font So far I have tried:
import { myFont } from "@/app/fonts/fonts";
const option = {
title: {
text: "Chart Title",
textStyle: {
fontFamily: `var(${myFont.variable})`,
},
},
tooltip: {
textStyle: { fontFamily: `var(${myFont.variable})` },
},
legend: {
textStyle: { fontFamily: `var(${myFont.variable})` },
},
series: [
{
type: "pie",
label: { fontFamily: `var(${myFont.variable})` },
emphasis: { label: { fontFamily: `var(${myFont.variable})` } },
data: [...],
},
],
};What does the proposed API look like?
// 1. Import your custom font (e.g., Persian Vazirmatn)
import { vazirmatn } from "@/app/fonts/fonts";
import ReactECharts from "echarts-for-react";
// 2. Provide the font to chart options
const chartOptions = {
title: {
text: "License Distribution",
textStyle: {
fontFamily: `var(${vazirmatn.variable})`, // Use custom font
fontSize: 16,
fontWeight: "bold",
},
},
tooltip: {
trigger: "item",
textStyle: {
fontFamily: `var(${vazirmatn.variable})`, // Tooltip text in custom font
},
},
legend: {
textStyle: {
fontFamily: `var(${vazirmatn.variable})`, // Legend in custom font
},
},
series: [
{
type: "pie",
label: {
show: true,
fontFamily: `var(${vazirmatn.variable})`, // Labels in custom font
},
emphasis: {
label: {
fontFamily: `var(${vazirmatn.variable})`, // Hover labels in custom font
},
},
data: [
{ value: 3500000, name: "Industrial" },
{ value: 2800000, name: "Home" },
{ value: 1900000, name: "Device" },
],
},
],
};
// 3. Use the chart in React
export default function DoughnutChart() {
return (
<div className={vazirmatn.className}>
<ReactECharts option={chartOptions} style={{ width: "100%", height: 350 }} />
</div>
);
}