Thursday, June 30, 2022
Angular 10Angular 8Angular 9HighChartsJavascript

Angular 8/9/10 HighCharts Show Data Labels to Right

Highcharts change data labels position

Hello to all, welcome to In this post, I will tell you, Angular 8/9/10 HighCharts Show Data Labels to Right.

Highcharts change data labels position
Highcharts change data labels position

Angular 10 came and if you are new in Angular then please check below links:

Angular 10 Tutorials

Angular 9 Tutorials

Angular 8 Tutorials

Angular learning

Here is the code snippet and please follow carefully:

1. Very first, to add highcharts into your angular application, please follow below link tutorial:

HighCharts into your Angular application

2. After implement highcharts into your angular application by following step 1, Now add below code into your app.component.ts file:

export class AppComponent{
chart = new Chart({
    chart: {
      type: 'bar'
    title: {
      text: 'Bar Chart'
    credits: {
      enabled: false
    xAxis: {
             opposite: false,
         categories: ['jan', 'feb', 'mrch', 'aprl', 'may']
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,
        allowOverlap: true,
        useHTML: true,
    series: [
      name: 'Bar 1',
      data: [1, 2, 3, 4, 3],


3. Now add below code into src/index.html file:

.highcharts-label.highcharts-data-label{left:auto!important; right:12px;}


This is it and if you have any kind of query then please do comment below.



the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.