Comments (5)
On large screens, the subtitles are clearly visible, but when I reduce the screen,the subtitles are scrambled in the chart.
You can use the margin={{ right: 150 }}
(or other value, or top, left, bottom) to restrain the space available to draw the pie (end then free some space for the legend)
Here is an example, where you can modify right
.
https://codesandbox.io/p/sandbox/charming-blackburn-tl5yvr?file=%2Fsrc%2FDemo.tsx%3A11%2C12
At right: 50
it overflows. But at 150 it let enough space for the legend
Does that solves your issue?
from mui-x.
Hello, how are you?
So, maybe it will help a bit, but I ended up choosing to put the subtitles at the bottom and hide them when the screen is smaller:
import React from 'react'
import { ChartProps } from './types'
import { PieChart } from '@mui/x-charts/PieChart';
import { Box } from '@material-ui/core';
export const Chart : React.FC<ChartProps> = (props) => {
const [ isHidden, setIsHidden ] = React.useState<boolean>(false);
const { items } = props;
const chartItems = (items.length === 1 && items[0].value === 0) ? [{id: items[0].id, label: items[0].label, value: 0.001}] : items;
const size = {height: 450}
const handleResize = () => {
if(window && window.innerWidth < 950) setIsHidden(true);
else setIsHidden(false);
}
React.useEffect(()=>{
window.addEventListener('resize', handleResize);
handleResize();
return () => {
window.removeEventListener('resize',handleResize)
}
},[])
return (
<Box sx={{ width: '100%', height: '100%' }}>
<PieChart
series={[
{
data: chartItems,
innerRadius: '50%',
highlightScope: { faded: 'global', highlighted: 'item' },
},
]}
slotProps={{
legend: {
hidden: isHidden,
direction: 'row',
position: { vertical: 'bottom', horizontal: 'middle' },
padding: 0,
labelStyle:{
fontSize: 14
},
itemMarkWidth: 11,
itemMarkHeight: 10,
},
}}
margin={{ top: 100, bottom: 100, left: 100, right: 100 }}
{...size}
/>
</Box>
);
}
In this case it helped, but I missed being able to manipulate the pieChart responsively, having control over its size and being able to edit the captions better. At first the idea was to have a personalized caption with a table, but as it was a bit obscure to manipulate the component, I opted to leave the caption below and create a separate explanatory table.
from mui-x.
At first the idea was to have a personalized caption with a table
The legend is currently in the SVG, so drawing a table might be complex.
At that level of customization, the easiest might be to create your legend with HTML and display it next to the chart, and hide the legend
from mui-x.
Great, but how can I insert a new html into the chart? and even more, how can I get item by item, because I imagine that to draw an html table I would need to get the color of the item, the label and the value and iterate over the table.
Are there any props that ChartPie accepts that I can do this with? Or any props that it exposes that I can manipulate?
from mui-x.
You don't need to put it in. You can put it out
function ChartsWithLegend() {
<div>
<PieChart />
<MyLegend />
</div>
}
how can I get item by item
You are providing the items to chat <PieChart/>
so you have acce to them.
The only thing we defaultize is the color. Either you force them in the charts with <PieChart colors={[....]} />
or you can use the default one import { blueberryTwilightPalette } from '@mui/x-charts/colorPalettes';
from mui-x.
Related Issues (20)
- [charts] Get access to the data outside of the SVG
- [charts] Document the usage of foreingObject
- [fields][DateField] on Android: using DateField on firefox doesn't work HOT 4
- [data grid] Impact of not renewing license for small changes and bug fixes HOT 3
- [data grid] `GridToolbarExport` does not consider `color` and `size` props anymore HOT 4
- [data grid] print layout of Export > Print is broken HOT 4
- [data grid] CSV export adds malformed/buggy characters HOT 2
- [TreeView] Expose the item slots at the tree view level
- [data grid] Is Clipboard cut available? HOT 1
- [data grid] Save / Restore state with dynamic columns HOT 7
- [pickers] dayjs with default timezone broke picker HOT 2
- [pickers] Page fails to load Date Picker Component with Joy UI using CssVarsProvider Wrapper HOT 5
- [charts] Improve default color contrast in dark mode HOT 9
- [RFC] Move to a more modular structure for tests in code and CI HOT 4
- Add Audio Player/Waveform component HOT 2
- [charts] Cannot scroll the page when touch inside the chart HOT 7
- [data grid] Pivoting ETA HOT 4
- Pie Chart shows a slice for 0 value whenever the object representing a 0 is last in the array HOT 2
- [DataGrid] CSV export negative numbers in string has quotation HOT 3
- [data grid] Is there a way to override the default copy/paste functionality in DataGrid? HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.