CODEWITHSUNDEEP
angularhighcharts
Nasik Ahd
Nasik Ahd

Reputation: 798

How to show series dataLabels inside the Highchart pyramid in angular

I am using Highchart pyramid in angular, Now its labels are showing in the right side of the below attached image. As i want to show series dataLabels inside the Highchart pyramid, i attached the below code i am using to retrieve Highchart pyramid .

How can I solve this?

enter image description here

public loadSevirtychart(data): any {
   const that = this;
   that.chartOptions2 = {
       chart: {
           type: "pyramid",
       },
       title: {
           text: "",
       },
       plotOptions: {
           series: {
               dataLabels: {
                   enabled: true,
                   format: "({point.x:,.0f})",
                   allowOverlap: false,
                   connectorPadding: 0,
                   distance: 10,
                   softConnector: true,
                   x: 0,
                   connectorShape: "fixedOffset",
                   crookDistance: "70%"
               },
               showInLegend: true,
               cursor: "pointer",
               point: {
                   events: {
                       click(event) {
                           that.drilldownseveritychart(this.id, this.name);
                       },
                   },
               },
           },
       },
       tooltip: {
           formatter() {
               const val = this.point.x;
               return "<b>" + this.point.name + "</b>: " + val + "";
           },
       },
       credits: {
           enabled: false,
       },
       legend: {
           layout: "horizontal",
           verticalAlign: "bottom",
           align: "center",
           itemWidth: 85,
           symbolWidth: 8,
           symbolHight: 6,
           floating: false,
           borderWidth: 0,
           backgroundColor: "#FFFFFF",
           shadow: false,
           itemStyle: {
               font: "8pt Trebuchet MS, Verdana, sans-serif",
               color: "#A0A0A0",
           },
       },
       series: [{
           name: "Count",
           data,
       }],
   };
}

Upvotes: 0

Views: 543

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

You can set dataLabels.inside = true (Highcharts version 7.1.2 and higher):

plotOptions: {
  series: {
    dataLabels: {
      enabled: true,
      inside: true,
      align: "center",
      verticalAlign: "middle"
    }
  }
}

Demo:

API reference:

Upvotes: 1

Related Questions