[I] [Feature] fontFamily [echarts]

["amiralim1377 (via GitHub)" <gi...@apache.org>]

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: commits-unsubscribe@echarts.apache.org.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org

Re: [I] [Feature] fontFamily [echarts]

["helgasoft (via GitHub)" <gi...@apache.org>]

helgasoft commented on issue #21388:
URL: https://github.com/apache/echarts/issues/21388#issuecomment-3577172768

   see examples in #14272 and #18991


-- 
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: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org