How to Avoid Duplicate Labels for Equal Values in Angular Chart?

This knowledge base article explains how to avoid duplicate labels for equal values in Angular Chart. When the high and low values of a data point are equal, charts may display both values as separate labels. This can result in duplicate labels that clutter the visualization and reduce clarity. To improve readability and avoid redundancy, it’s important to suppress one of the labels when both values are the same.

Avoid Duplicate Labels for Equal Values

To avoid rendering duplicate labels when the high and low values are the same, you can use the textRender event of the chart component. This event is triggered for each label that is about to be rendered. By checking if both values are equal (args.point.low === args.point.high), you can cancel one of the labels using args.cancel. A flag variable (labelShown) is used to track whether a label has already been rendered for that data point. If a label has already been shown, the next one is canceled; otherwise, the flag is set and the label is allowed. This ensures that only one label is displayed for data points where low and high are equal, avoiding duplication.

Code Snippet

app.component.html

<ejs-chart
     [primaryXAxis]="primaryXAxis"
     [primaryYAxis]="primaryYAxis"
     (textRender)="textRender($event)"
   >
     <e-series-collection>
       <e-series
         [dataSource]="rangeBarData"
         type="RangeColumn"
         xName="country"
         high="high"
         low="low"
         [marker]="marker"
       >
       </e-series>
     </e-series-collection>
   </ejs-chart>

app.component.ts

private labelShown = false;
 public textRender(args: ITextRenderEventArgs): void {
   if (args.point.low === args.point.high && this.labelShown) {
     args.cancel = true;
     this.labelShown = false;
   } else if (args.point.low === args.point.high) {
     this.labelShown = true;
   }
 }

Output

Only one label (either min or max) will be shown for data points with identical values.

Live Sample

StackBlitz Demo

Conclusion

I hope you enjoyed learning about how to avoid duplicate labels for equal values in Angular Chart.

You can refer to our Angular Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our Angular Chart Documentation to understand how to present and manipulate data.

For current customers, you can check out our Angular components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Angular Chart and other Angular components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)