Data Labels Disappears in Accumulation Series Directive when Tooltip is displayed


I have made a piechart using @syncfusion/ej2-react-lineargauge

The problem is i have a data label that keeps disappearing whenever i hover to get a tooltip.

I pass in a template function for data label to override the default

The data label works fine with the default template, but just disappears on hover when template is passed

<AccumulationChartComponent
                    id={`pie-chart_${iIndex}`}
                    tooltip={{enable: true}}
                    legendSettings={{
                      position: 'Bottom',
                      visible: true,
                      width: '100%',
                    }}
                    width="100%"
                    ref={chart => currentInstance = chart}
                    background={'transparent'}
                    height={'80%'}
                    legendRender={(e) => {
                      const obj = data.filter((t) => t.name === e.text)[0];
                      e.text = `${obj.name.replaceAll("_", " ")}`;
                    }}
                    enableSmartLabels={'true'}
                  >
                    <Inject
                      services={[PieSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationLegend, Export]}
                    />
                    <AccumulationSeriesCollectionDirective>
                      <AccumulationSeriesDirective
                        dataSource={data}
                        xName='name'
                        yName='insight_value'
                        // startAngle={60}
                        innerRadius='20%'

                        dataLabel={{
                          visible: true,
                          position: 'Outside',
                          font: {
                            fontWeight: '600',
                            color: '#000',
                            size: '13px'
                          },
                          format: `adasd `,
                          template: (args) => {
                            return (
                              <div id={`template-wrap-${iIndex}`}>
                                <span>{`${args.point.percentage}%`}</span>
                                <span>{`(${args.point.y})`}</span>

                              </div>
                            )
                          },
                        }}
                        tooltip={{
                          enable: true,

                        }}
                        palettes={[
                          '#CA6D4C', '#F89247',
                          '#FFB82C', '#FAD817',
                          '#FF9377', '#C84A4C',
                          '#9A3634'
                        ]}
                      >
                      </AccumulationSeriesDirective>
                    </AccumulationSeriesCollectionDirective>
                  </AccumulationChartComponent>

Note: I map over an array to display multiple pie charts

Before Hovering

enter image description here

After Hovering

enter image description here

Source: React – Stack Overflow

November 28, 2021
Category : News
Tags: react-charts | reactjs | syncfusion | syncfusion-chart

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.