[charts] Have a color outline to a single stack bar for a single category about mui-x HOT 6 CLOSED

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',
}));

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

from mui-x.

@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)

from mui-x.

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

from mui-x.

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

from mui-x.

⚠️ 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.

from mui-x.

@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.

What I want to achieve

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

from mui-x.