Angular 10Angular 8Angular 9HighChartsJavascript

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

Highcharts change data labels position

Hello to all, welcome to therichpost.com. 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:

<head>
...
<style>
.highcharts-data-labels.highcharts-bar-series{right:0;}
.highcharts-label.highcharts-data-label{left:auto!important; right:12px;}
</style>
</head>

 

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

Jassa

Thanks

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

2 Comments

Leave a Reply

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