Columna con etiquetas giradas

A continuación se muestra un ejemplo de un gráfico de columnas con etiquetas giradas.

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts . Veamos ahora configuraciones adicionales y también cómo hemos agregado el atributo de rotación en dataLabels.

A continuación se muestra un ejemplo de un gráfico de columnas con etiquetas giradas.

dataLabels

dataLabels es un objeto contenedor para manejar etiquetas de datos dentro de gráficos.

Rotación de texto en grados. Tenga en cuenta que debido a una estructura más compleja, los fondos, los bordes y el relleno se perderán en una etiqueta de datos rotada. Este valor predeterminado es 0.

dataLabels = {
   enabled: true,
   rotation: -90,
   color: '#FFFFFF',
   align: 'right',
   format: '{point.y:.1f}', // one decimal
   y: 10, // 10 pixels down from the top
   style: {
      fontSize: '13px',
      fontFamily: 'Verdana, sans-serif'
   }
}

Ejemplo

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {   
      chart : {
         type: 'column'
      },
      title : {
         text: 'World\'s largest cities per 2014'   
      },
      subtitle: {
         text: 'Source: <a href = "http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
      },
      xAxis : {
         type: 'category',
         labels: {
            rotation: -45,
            style: {
               fontSize: '13px',
               fontFamily: 'Verdana, sans-serif'
            }
         }
      },
      yAxis : {
         min: 0,
         title: {
            text: 'Population (millions)'
         }
      },
      tooltip : {
         pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
      },
      credits : {
         enabled: false
      },
      series : [
         {
            name: 'Population',
            data: [
               ['Shanghai', 23.7],
               ['Lagos', 16.1],
               ['Instanbul', 14.2],
               ['Karachi', 14.0],
               ['Mumbai', 12.5],
               ['Moscow', 12.1],
               ['Sao Paulo', 11.8],
               ['Beijing', 11.7],
               ['Guangzhou', 11.1],
               ['Delhi', 11.1],
               ['Shenzhen', 10.5],
               ['Seoul', 10.4],
               ['Jakarta', 10.0],
               ['Kinshasa', 9.3],
               ['Tianjin', 9.3],
               ['Tokyo', 9.0],
               ['Cairo', 8.9],
               ['Dhaka', 8.9],
               ['Mexico City', 8.9],
               ['Lima', 8.9]
            ],
            dataLabels: {
               enabled: true,
               rotation: -90,
               color: '#FFFFFF',
               align: 'right',
               format: '{point.y:.1f}', // one decimal
               y: 10, // 10 pixels down from the top
               style: {
                  fontSize: '13px',
                  fontFamily: 'Verdana, sans-serif'
               }
            }
         }
      ]
   };
}

Resultado

Verifica el resultado.