[charts] Pass onClick to chart item

[alexfauquette]

Follow up to #10506

Allows to add onClick which should be triggered when clicking on an item

Charts todo

• Pie chart
• Line chart
• Bar chart
• scatter chart

How

Follow #10506 to get inspiration. In short:

• The onClick goes the the chart component and the plot components
• it takes as an argument: the event, the item identifier, and the item content
• modify the cursor based on the presence or not of an onClick

Search keywords:

[yaredtsy]

hey @alexfauquette

I have also been working on this one, But I was trying to implement it in a different way. I have tried to adopt the ChartsTooltip approach. I have created an OnClickHandler component that listens to the mousedown event on svgRef.

https://github.com/yaredtsy/mui-x/blob/39f99c8ea51cd69a8ae26a85b8f1f7886d958ff7/packages/x-charts/src/OnClickHandler.tsx#L40-L99

Lines Demo : https://codesandbox.io/s/misty-currying-z9nwrz?file=/src/Demo.tsx
ScatterDemo : https://codesandbox.io/s/tender-herschel-4zgpjg?file=/src/Demo.tsx
Bar Demo : https://codesandbox.io/s/great-bardeen-23d62k?file=/src/Demo.tsx:147-233

[alexfauquette]

Hi @yaredtsy could you open a PR to see the entire file modification?

[alexfauquette]

The more I think about it, the more I wonder if it's not closely related to #9358 which would also move the mouse interaction from the scatter chart items to the svg component

[wascou]

I would love to have this feature on scatter chart! It would ease the reading of data in the Tooltip with a fixed placed holder for example. Or we can use to select one item in the chart and compare it with the data in the tooltip.

[konrazem]

You can use color as reference of slice of pie chart (uniq color is id).
NOTE: Of course u should limit number of colors and hence number of pie chart items!

example:
https://codesandbox.io/s/quirky-roentgen-vj8df8?file=/src/Demo.tsx

    <PieChart
      colors={itemsWithColors.map((item) => item.color)}
      series={[
        {
          data: itemsWithColors
        }
      ]}
      slotProps={{
        pieArc: {
          onClick: (e) => handleArcClick(e.target),
          cursor: "pointer"
        }
      }}
      width={400}
      height={200}
    />

[nico-martinucci]

@alexfauquette Just want to say thanks for working on this! This would be a huge improvement to one of our chart implementations. Appreciate you!

[alexfauquette]

@nico-martinucci Based on you use cases, do you have insight regarding the different option in the PR?

[nico-martinucci]

Probably idea 2, but would love your thoughts - we have a summary graph, calculated from many many rows of raw data. That raw data is rolled up into months, weeks, or days depending on user-set filters. My hope is for a user to be able to click on one of the stacked bars (which represents a single month, week, or day) and this would navigate to a page with a table of the rows that were rolled-up into that particular bar. For example, clicking on "June '23" bar would take you to the table with only records from that month, or clicking on "June 13, 2023" would take you to a table of records just for that day. Ideally the onClick would take the raw data of the clicked item as a param, so that that could be passed into another custom handler to set state, url params, etc.