How to Render the Angular Column Chart Without Axis Labels?

Description

This article shows how to render the Angular Column Chart without axis labels.

Solution

Label for data is the label used to refer to the description or name given on the axis. You can hide the axis labels by setting the size property to 0px in the labelStyle of the primaryXAxis and primaryYAxis in the Chart.

Code Snippet

   public primaryXAxis: Object = {
       valueType: 'Category',
       majorGridLines: { width: 0 },
       majorTickLines: {width : 0},
       minorTickLines: {width: 0},
       labelStyle: { size: "0px" }
   };

The following image illustrates the output of the above code:

Refer to the working sample for additional details and implementation: View Sample in Stackblitz

Conclusion

we hope you enjoyed learning about how to render the Angular Column Chart without axis labels.

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

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

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