[Feature]: Scatter Chart

[christopherkindl]

What problem does this feature solve?

Hi community,

Chris here from Tremor. We are working on a new chart component which is a scatter plot. We use Recharts' ScatterChart as the basis.

Recharts' component does not offer the data input as we prefer. It would require multiple data arrays to differentiate between categories, see example here (-> "show data format").

Our ask Our desired API / data input logic is shown below with a specific example. However, we are not totally sure if that would be the most appealing way for users to use this component. This is why want to open up the discussion here and hear what you think. Also feel free to tackle the issue directly and propose your solution. If so, respond below with a quick proposal and we will assign it to you.

We already published a branch here that covers the base styling and shows the current data input logic of Recharts.

What does the proposed API look like?

// preferred data input format

const data = [
    {
      country: "Afghanistan",
      lifeExp: 27.7,
      gdpPercap: 1156,
      population: 7480464,
      continent: "Asia",
      happinessLev: 4.5,
    },
    {
      country: "Albania",
      lifeExp:: 46.5,
      gdpPercap: 1736,
      population: 1366747,
      continent: "Europe",
      happinessLev: 5.5,
    },
   //...
]

// preferred syntax

<ScatterChart
    data={data}
    x={["gdpPercap"]},
    y={["lifeExp"]},
    size={["population"]}, // optional prop
    color={["continent"]}, // optional prop
    tooltip={["country", "happinessLev"]} // optional prop
    ... // standard styling props as seen in our other chart components
/>

The tooltip can be styled in the following way:

• Data used for color is displayed in the header of the tooltip with the corresponding color, e.g. blue dot + Europe (header: place where x-axis value would be displayed in the other chart components)
• Data provided for tooltip is listed in body of tooltip without any color reference, e.g. data attribute ("Country") + value ("Albania")

[christopherkindl]

@thethmuu As you asked about contributing several times, I will mark you here. I'm happy to hear your opinion.

[thethmuu]

@christopherkindl Thanks for marking me, Chris. As I am quite busy with my new job these days and charts are not my field of expertise, I would skip this one. I really love to contribute to Tremor ❤️ and already did once last month. So please do mention me next time with other issues, Chris.

[mbauchet]

I've tried something like this:

Is it the expected result?

I updated props like this:

  <ScatterChart
      data={data}
      x={"gdpPercap"},
      y={"lifeExp"},
      size={"population"}, // optional prop
      category={"continent"}, 
      tooltip={["country", "happinessLev"]} // optional prop
      ... // standard styling props as seen in our other chart components
  />

[christopherkindl]

Thank you so much, @mbauchet! I will check it out asap and get back to you 🙂

[christopherkindl]

@mbauchet For the tooltip, it makes most sense to use color labels only for the categories (e.g. red color for Asia, etc.). Let me know what you think and feel free to do a PR afterwards 🙂

[mbauchet]

@mbauchet For the tooltip, it makes most sense to use color labels only for the categories (e.g. red color for Asia, etc.). Let me know what you think and feel free to do a PR afterwards 🙂

Yes, sounds good! Will work on it this weekend. I'll do a PR after that

[christopherkindl]

That's awesome - Thank you so much!

[github-actions[bot]]

:tada: This issue has been resolved in version 3.6.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[adobayua-rpay]

Hey just to point out, but the scatter chart seems to be broken. Running it gives you this error Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.