1. Home
  2. Forum
  3. React - EJ 2
  4. How to customize legendShape and can we apply styles to legends. like css flex properties

How to customize legendShape and can we apply styles to legends. like css flex properties

1) I need to customize the legends shape I tried with rectangle but it was getting space in between.
2)  I need to style legends using flex or any css property how to arrange two legends in columns..
3)in pie chart I need to put total time logged In - inside the pie chart.

please refer this link https://drive.google.com/drive/folders/1ODmdC5wK2fML7Ol0gEhWQdlk4_wPoe6H?usp=sharing

I was using React. 

<AccumulationChartComponent
style={{ width: "inherit", height: "inherit" }}
legendSettings={{
shapeHeight: 20,
shapeWidth: 8,
location: { x: 100, y: 40 },
position: "Left",
}}
>
<Inject services={[AccumulationLegend]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective
dataSource={chartData}
xName={"name"}
innerRadius="75%"
dataLabel={{ visible: true, name: "x" }}
startAngle={0}
endAngle={360}
// radius="90%"
explode={true}
explodeOffset="2%"
explodeIndex={0}
yName="value"
legendShape="Rectangle"
></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>

6 Replies
SM Srihari Muthukaruppan Syncfusion Team April 22, 2021 12:25 PM UTC

Hi Nikhila, 
 
Please find the response for chart related queries. 
 
Query #1: I need to customize the legends shape I tried with rectangle but it was getting space in between. 
 
As of now we are facing issue in rendering legend of the doughnut chart. We have also logged a bug request on this. You can keep track of it from the below feedback portal link.  
  
 
This fix will be available in our weekly patch release which is scheduled to be rolled out on or before May 4 2021. We appreciate your patience until then . 
 
Until then we suggest you to use below workaround solution to overcome the reported scenario which is achieved using loaded event in the chart as shown in the below code snippet. Please find the sample, code snippet and screenshot below. 
 
 
Code Snippet: 
// add your additional code here 
<AccumulationChartComponent id="pie-chart" enableSmartLabels={true} tooltip={{ enable: true }} loaded={this.onChartLoad.bind(this)} > 
 
// add your additional code here 
onChartLoad(args) { 
    document.getElementById("pie-chart").setAttribute("title", ""); 
    for (var i = 0; i < args.accumulation.series[0].dataSource["length"]; i++) { 
      var stroke = document 
        .getElementById("pie-chart_chart_legend_shape_" + i) 
        .getAttribute("fill"); 
      document 
        .getElementById("pie-chart_chart_legend_shape_marker_" + i) 
        .setAttribute("fill", stroke); 
    } 
} 
 
// add your additional code here 
 
Query #2: I need to style legends using flex or any css property how to arrange two legends in columns. 
 
We can achieve your requirement using width and height property in the legend of the accumulation chart. Please find the below sample, code snippet and screenshot. 
 
 
Code Snippet: 
// add your additional code here 
 
<AccumulationChartComponent 
            id="pie-chart" 
            title="Project Cost Breakdown" 
            legendSettings={{ 
              visible: true, 
              shapeHeight: 20, 
              shapeWidth: 8, 
              position: "Left", 
              width: "200px", 
              height: "100px" 
            }} 
            enableSmartLabels={true} 
            tooltip={{ enable: true }} 
            loaded={this.onChartLoad.bind(this)} > 
 
// add your additional code here 
 
Query #3: in pie chart I need to put total time logged In - inside the pie chart. 
 
We can achieve your requirement using annotation property in the chart. Please find the sample, code snippet and screenshot below. 
 
 
Code Snippet: 
// add your additional code here 
 
<AccumulationAnnotationsDirective> 
              <AccumulationAnnotationDirective 
                content="<div id=center_title >Total Logged Time</div>" 
                region="Series" 
                coordinateUnits="Pixel" 
                x="50%" 
                y="47%" 
              /> 
              <AccumulationAnnotationDirective 
                content="<div id=center_title1 >62:33:17</div>" 
                region="Series" 
                coordinateUnits="Pixel" 
                x="50%" 
                y="55%" 
              /> 
</AccumulationAnnotationsDirective> 
 
// add your additional code here 
 
Screenshot: 
 
 
Let us know if you have any concerns. 
 
Regards, 
Srihari M 


ND ND April 26, 2021 01:35 PM UTC

Thanks for the reply,

1)How to I style the legend test same like in image,, Actually I was tried by
after -> projectABC + "
" + 14h but, html coding not coverting to new line.

2)I have used  width: "200px",
height: "100px",
in legend settings which you mentioned it was not working, I can see pagination and how does I avoid it , tried with increase in height

3) How does loaded works in case of className instead of id.  I tried couple of ways, but not accepting . 
const onLoaded = (args) => {
const domElements = document?.getElementsByClassName("pie-chart");
for (let i = 0; i < domElements.length; i++) {
domElements[i]?.setAttribute("title", "");
}
for (let i = 0; i < args.accumulation.series[0].dataSource["length"]; i++) {
const stroke = document?.getElementsByClassName(
"pie-chart_chart_legend_shape_" + i
);
for (let i = 0; i < stroke.length; i++) {
const ele = stroke[i].getAttribute("fill");
const addStroke = document?.getElementsByClassName(
"pie-chart_chart_legend_shape_marker_" + i
);
addStroke[i]?.setAttribute("fill", ele as string);
}
}
};

4) I was trying to print chart, but unable to print., chartInstance not present, I was using react-hooks.

const clickHandler = () => {
chartInstance.print();
};
return (
<div style={{ width: "inherit", height: "inherit" }}>
<style>{SAMPLE_CSS}style>
<button value="print" onClick={clickHandler}>
Print
button>
{chartData.length > 0 ? (
<AccumulationChartComponent
id={id}
ref={(chart) => (chartInstance = chart)}
style={{
width: "inherit",
height: "inherit",
fontFamily: PRIMARY_TEXT_FONT,
fontWeight: "normal",
fontSize: "0.8rem",
color: ICONS,
}}
enableBorderOnMouseMove={false}
legendSettings={{
visible: true,
shapeHeight: 25,
shapeWidth: 8,
position: "Left",
width: "200px",
height: "100px",
}}
enableSmartLabels={true}
tooltip={{ enable: true }}
loaded={onLoaded}
>
<Inject
services={[
AccumulationLegend,
AccumulationAnnotation,
// PieSeries,
AccumulationDataLabel,
]}
/>
{isInnerText ? (
<AccumulationAnnotationsDirective>
<AccumulationAnnotationDirective
content="
Total Logged
Time
"
region="Series"
coordinateUnits="Pixel"
x="56%"
y="50%"
/>
<AccumulationAnnotationDirective
content="
62:33:17
"
region="Series"
coordinateUnits="Pixel"
x="50%"
y="70%"
/>
AccumulationAnnotationsDirective>
) : (
""
)}
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective
dataSource={chartData}
xName={"text"}
innerRadius={innerRadius}
startAngle={0}
endAngle={360}
explode={true}
explodeOffset="0%"
explodeIndex={0}
yName={"value"}
legendShape="Rectangle"
>AccumulationSeriesDirective>
AccumulationSeriesCollectionDirective>
AccumulationChartComponent>
) : (
<div>Loading...div>
)}
div>
);
}

SM Srihari Muthukaruppan Syncfusion Team April 27, 2021 06:29 PM UTC

Hi Nikhila, 
  
Please find the response for chart related queries. 
  
Query #1: How to I style the legend test same like in image 
  
As of now we don’t have support to achieve your requirement. We have considered the reported scenario as a feature and logged a feature request for this. This feature will be available in any of our releases. We appreciate your patience until then. You can keep track of the feature request from the feedback portal below.  
  
   
The provided feedback link is private, and you need to login to view this feedback.  
   
If you have any more specifications/precise replication procedures or a scenario to be tested, you can add it as a comment in the portal.  
  
Query #2: I can see pagination and how does I avoid it , tried with increase in height 
  
We can achieve your requirement by setting enablePages property as false in the legendSettings of the chart. And also we would like to let you know that legend height and width has to be adjusted manually based on your requirement. Please find the sample, code snippet and screenshot below. 
  
  
Code Snippet: 
// add your additional code here 
  
legendSettings={{ 
              visible: true, 
              shapeHeight: 25, 
              shapeWidth: 8, 
              position: "Left", 
              width: "300px", 
              height: "140px", 
              enablePages: false 
            }} 
  
// add your additional code here 
  
  
Screenshot: 
 
  
Query #3: How does loaded works in case of className instead of id 
  
Unfortunately as of now it is not possible to access the legendShape using className since it has only id for the legends. Hence we suggest you to use the previous suggested solution using id to overcome the reported scenario. 
Query #4: I was trying to print chart, but unable to print., chartInstance not present, I was using react-hooks. 
  
The reported scenario occurs due to sample level issue. We have modified the provided code snippet and prepared a sample for your reference. Please find the sample, code snippet and screenshot below. 
  
  
Code snippet: 
// add your additional code here 
  
const clickHandler = () => { 
      this.chartInstance.print(); 
    }; 
    return ( 
      <div style={{ width: "inherit", height: "inherit" }}> 
        <style>{SAMPLE_CSS}</style> 
        <button value="print" onClick={clickHandler}> 
          Print 
        </button> 
        {data1.length > 0 ? ( 
          <AccumulationChartComponent 
            id="container" 
            ref={chart => (this.chartInstance = chart)} 
  
// add your additional code here 
  
Screenshot: 
 
  
Let us know if you have any concerns. 
  
Regards, 
Srihari M 


ND ND April 28, 2021 08:10 AM UTC

Thanks for the fast Reply.

1) how to I avoid rendering 0 values, actually I was showing value in charts using dataLabel, but if more 0 values it was mapping with 0 value. with arrows.
2) why does in grouped bar/ normal bar chart duplicate name were not allowing.
  dataLabel={{
visible: true,
name: "value",
position: "Inside",
// font: {
// color: "#3D3D3D",
// fontFamily: PRIMARY_TEXT_FONT,
// fontWeight: "normal",
// },
}}

SM Srihari Muthukaruppan Syncfusion Team April 29, 2021 09:15 AM UTC

Hi Nikhila, 
  
Please find the response for chart related queries. 
  
Query #1: How to I avoid rendering 0 values, actually I was showing value in charts using dataLabel, but if more 0 values it was mapping with 0 value. with arrows. 
  
Based on your requirement we would like to let you know that we can achieve your requirement using textRender event in the chart. We have also prepared a sample for your reference. Please find the sample, code snippet and screenshot for your reference. 
  
  
Code Snippet: 
// add your additional code here 
  
<ChartComponent id="charts" textRender={this.textRender.bind(this)} > 
// add your additional code here 
</ChartComponent> 
// add your additional code here 
  
  textRender(args) { 
    if (args.text == "0") { 
      args.text = ""; 
    } 
  } 
// add your additional code here 
  
  
Screenshot: 
 
  
Query #2: why does in grouped bar/ normal bar chart duplicate name were not allowing. 
  
Based on the provided code snippet we have prepared a sample for your reference. Please find the sample and screenshot below.  
  
  
Code Snippet: 
// add your additional code here 
  
export let data1 = [ 
  { x: "USA", y: 10, value: "USA : 10" }, 
  { x: "GBR", y: 27, value: "GBR : 27" }, 
  { x: "CHN", y: 26, value: "CHN : 26" } 
]; 
  
// add your additional code here 
  
marker={{ 
    dataLabel: { 
            visible: true, 
            showZero: true, 
            position: "Outer", 
            name: "value" 
      } 
}} 
  
// add your additional code here 
  
  
Screenshot: 
 
  
Since we are not clear about your exact requirement kindly share more details regarding the requirement which will be helpful for further analysis and provide you solution sooner. 
  
Regards, 
Srihari M 


SM Srihari Muthukaruppan Syncfusion Team May 4, 2021 11:52 AM UTC

Hi Nikhila, 
  
Query #1: I need to customize the legends shape I tried with rectangle but it was getting space in between. 
   
We are glad to announce that our v19.1.59 patch release is rolled out, we have added the fix for the reported scenario. And you can use the latest (19.1.59) chart package version to get rid of the reported issue.    
  
  
Screenshot: 
 
  
We appreciate your patience in waiting for this release. Kindly let us know if you need further assistance.    
    
Regards,    
Srihari M 


Loader.
Up arrow icon