I would like to centralize the pie chart in box and make it more responsive when window is resized. Currently, its not in centered inside box, words cut-off and also not responsive in view.
ReportResult.jsx
<div className="col-md-6 m-t-10">
<div className="report-tab-chart-sub">
<h3 className="report-tab-chart-title">Operating Expenses</h3>
<div className="operating-chart">
<ReactEcharts className="echarts-margin"
option={{
series: [{
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '50%'],
selectedMode: 'single',
data: [
{
value: chartManagefee,
itemStyle: {color: '#1d7ff0'},
label: {
formatter: [
'{title1|{c}%}',
'{title2|Property management fee}',
'{br|}'
].join('\n'),
rich: {
title1: {
align: 'left',
fontSize: '14'
},
title2: {
color: '#999999',
align: 'left',
fontSize: '14'
}
}
}
},
{
value: chartWaterbill,
itemStyle: {color: '#cd78f1'},
label: {
formatter: [
'{title1|{c}%}',
'{title2|Water bill}',
'{br|}'
].join('\n'),
rich: {
title1: {
align: 'right',
fontSize: '14'
},
title2: {
color: '#999999',
align: 'right',
fontSize: '14'
}
}
}
},
{
value: chartUtilities,
itemStyle: {color: '#bde955'},
label: {
formatter: [
'{title1|{c}%}',
'{title2|Utilities}',
'{br|}'
].join('\n'),
rich: {
title1: {
align: 'right',
fontSize: '14'
},
title2: {
color: '#999999',
align: 'right',
fontSize: '14'
}
}
}
},
{
value: chartTaxes,
itemStyle: {color: '#7be1b1'},
label: {
formatter: [
'{title1|{c}%}',
'{title2|Taxes}',
'{br|}'
].join('\n'),
rich: {
title1: {
align: 'right',
fontSize: '14'
},
title2: {
color: '#999999',
align: 'right',
fontSize: '14'
}
}
}
},
{
value: chartPestcontrol,
itemStyle: {color: '#f0a808'},
label: {
formatter: [
'{title1|{c}%}',
'{title2|Trash Removal/Pest Control/}',
'{title3|Landscaping}',
'{br|}'
].join('\n'),
rich: {
title1: {
align: 'right',
fontSize: '14'
},
title2: {
color: '#999999',
align: 'right',
fontSize: '14'
},
title3: {
color: '#999999',
align: 'right',
fontSize: '14'
}
}
}
},
{
value: chartInsurance,
itemStyle: {color: '#fc5532'},
label: {
formatter: [
'{title1|{c}%}',
'{title2|Insurance}',
'{br|}'
].join('\n'),
rich: {
title1: {
align: 'right',
fontSize: '14'
},
title2: {
color: '#999999',
align: 'right',
fontSize: '14'
}
}
}
}
]
}]
}}
/>
</div>
</div>
</div>
style.css
@page {
size: A4;
/* margin: 10mm; */
}
@media print {
body { -webkit-print-color-adjust: exact; }
#controlled-tab-example-tabpane-propertyinfo,
#controlled-tab-example-tabpane-comps { display: block; }
.header-set-bg-img, .footer, .no-print-button {display: none;}
.col-md-6 {
width: 460px !important;
}
.page-break {
page-break-before: always;
}
img.static_map {
display: block;
}
.googleMap{
display: none;
}
.echarts-for-react{
position: relative;
}
.echarts-for-react ,
.echarts-for-react > div {
width:450px!important;
height: auto !important;
}
.echarts-for-react > div > canvas {
display: block !important;
width: 100% !important;
max-width:100% !important;
height: auto !important;
}
@media(max-width:1400px){
.echarts-for-react ,
.echarts-for-react > div {
height:200px!important;
}
.echarts-for-react > div > canvas{
height:100%!important;
/* width:auto!important; */
left:10px!important;
}
}
.line-chart {
height: 300px !important;
width: 400px !important;
}
.line-chart > div > canvas {
width: 400px !important;
height: 230px !important;
}
}
.print-page-break {
page-break-before: always;
}
.operating-chart > div canvas{
width: auto !important;
text-align: center !important;
}
Here, I have generated Pie chart using echart/echarts-for-react package. I had checked with props in echart/echarts-for-react inside setOption but didn't get any works for making a chart more responsive and centered.