amiralim1377 opened a new issue, #21388:
URL: https://github.com/apache/echarts/issues/21388
### 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>
);
}
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
