search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.93k stars 1.2k forks source link

[charts] Have a color outline to a single stack bar for a single category #13716

Closed MainaMwangiy closed 6 days ago

MainaMwangiy commented 1 week ago

Steps to reproduce

No response

Current behavior

I want to have a single category like Average to have a red outline like this. image

Expected behavior

Right now not sure what property to use to add a red outline on a stack bar like shown.

Context

No response

Your environment

npx @mui/envinfo ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: charts bar chart black outline

JCQuintas commented 1 week ago

Hi @MainaMwangiy we currently don't support that use-case. The closest you can get currently is a border around all of the "stacks" by reimplementing the Bar element.

export const Bar = styled(animated.rect, {
  name: 'MuiBarElement',
  slot: 'Root',
  overridesResolver: (_, styles) => styles.root,
})<{ ownerState: BarElementOwnerState }>(({ ownerState }) => ({
  fill: ownerState.isHighlighted
    ? d3Color(ownerState.color)!.brighter(0.5).formatHex()
    : ownerState.color,
  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
  opacity: (ownerState.isFaded && 0.3) || 1,
  strokeWidth: 5,
  // This here, use your data instead of seriesA.data
  stroke: ownerState.dataIndex === seriesA.data.length - 1 ? 'black' : 'none',
}));

Screenshot 2024-07-03 at 14 42 24

You can find the code here: https://stackblitz.com/edit/react-6fcijw?file=Demo.tsx

MainaMwangiy commented 6 days ago

@JCQuintas Thanks for the prompt response. But I am facing a challenge using it with ResponsiveChartContainer. I want to have the black outline as you gave above based on a condition like if Average is present, then it should have a black outline. Please check the example and use case I am using. (https://stackblitz.com/edit/react-xh8m58?file=Demo.tsx)

JCQuintas commented 6 days ago

You could try to pass categories as ownerState through the slotProps as shown here: https://stackblitz.com/edit/react-xh8m58-yzhwyy?file=Demo.tsx

MainaMwangiy commented 6 days ago

@JCQuintas Again, Thanks for the swift response. The solution has now fully fixed my issue. Thank you.

github-actions[bot] commented 6 days ago

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@MainaMwangiy: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

MainaMwangiy commented 4 days ago

@JCQuintas I am facing one more issue on this. If I have a lot of options with 0,1,2 values, then the black outline color gets clamped together. And the UI looks bad. Check attached example. Is there a way to only show the outline on the outer stack borders? Without having the strike tough lines that are from left to right on the stacks.

What I am getting at the moment when I have may options. image

What I want to achieve image

Please let me know if there is a way and if we can reopen this until I get a full solution.