[Feature] fontFamily
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
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:
```js
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?
```jsx
// 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 (
);
}
```
Contributor guide
Research direction
The issue names no ECharts source file, test, or entry point. Start by locating how fontFamily is handled for title, tooltip, legend, and series label text styles, then define and verify the proposed custom-font behavior across those elements.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript
- Domain
- data-visualization, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100