apache / apache/echarts

[Feature] fontFamily

Open
#21,388 1 comment 0 reactions 0 assignees View on GitHub
en new-feature pending
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.