[Feature]: Multiple y-axes in AreaChart

[scaltunsoy]

What problem does this feature solve?

I want to have two y-axes which have different domains. For example, y axis on the left side shows the amount of money while the one on the right side may shows the percentage.

It looks like recharts support this: https://codesandbox.io/p/sandbox/simple-line-chart-forked-c2h5cw. yAxisId and orientation may be used.

Here is an example from another library: https://www.chartjs.org/docs/latest/samples/line/multi-axis.html

What does the proposed API look like?

AreaChart may have optional orientation property which is an array of left and right.

Example: orientation=["left", "right"]

It means that the y axis of the first category is on the left side. The other one is on the right side. If orientation is provided, more than one YAxis (from recharts) can be used. If orientation is not provided as it is optional, the current behavior should not be changed.

This API also solves https://github.com/tremorlabs/tremor/issues/827. orientation=["right"] may be passed in that case.

---

In addition to orientation, valueFormatter property should be modified. Since the values on different axes are from different domains, they should be formatted differently. The valueFormatter function may have an optional second parameter: index.

function formatter(value, index) {
 switch (index) {
  case 0:
   return formatCurrency(value, locale, currency)
  case 1:
   return formatPercentage(value, locale)
 }
}

valueFormatter={formatter}

---

I think neither adding orientation property nor modifying valueFormatter is a breaking change.