tremor [Feature]: Adding Legend Formatter for Area Chart

[Feature]: Adding Legend Formatter for Area Chart

Open alamenai opened this issue 1 year ago • 2 comments

What problem does this feature solve?

Hi Tremo team!

You built the best-ever Area Chart for react applications and I genuinely appreciate your work. While I was working with area chart by getting the data from the backend.

The data properties and values are English, so I made my component like this:


     <AreaChart
          className='h-96 mt-4'
          data={data}
          index='date'
          categories={["accumulatedDiscountedCashflow", "remainingCredit"]}
          colors={["blue", "red"]}
          showTooltip={false}
          showAnimation
        />

When the chart is displayed the legends are displayed in English while our app is in DE ( German ) language, so I wanted to format the categories when they display it , I did not find a way to change the text of the categories.

Currenttly, I hided the legend and then create a custom legend on the top of the chart:

  <CardContent>
        <Legend
          categories={["Ausstehender Kredit", "Finanzielle Tugend"]}
          colors={["blue", "red"]}
          className='w-fit float-right mb-2'
        />
        <AreaChart
          className='h-96 mt-4'
          data={data}
          index='date'
          categories={["accumulatedDiscountedCashflow", "remainingCredit"]}
          colors={["blue", "red"]}
          showTooltip={false}
          showLegend={false}
          showAnimation
        />
      </CardContent>

It would be better to have a prop called legendFormattter to change the text of the legends.

Thank you :heart