Skip to main content
Recompensa finalizada con 50 de reputación otorgada por ComunidadBot
se añadieron 62 caracteres en el cuerpo
Origen Enlace
Montaycabe
  • 1k
  • 5
  • 11

Puedes hacer "estrictamente" lo que dices con un par de lineas de css, pero no sé si sera el resultado que pretendes conseguir, yo creo que se lee peor. El borde está precisamente para impedir que se mezclen las letras con las barras. He suavizado un poco los colores de las barras para evitarlo

$(function () {
 Highcharts.setOptions({
 lang: {
 thousandsSep:  ','
 }
 });
 $('#grafico0').highcharts({
colors: ['#263238'['#f6b88e', '#00BCD4']'#90ec90'],
    chart: {
       type: 'column'
    },
    title: {
       text: 'Horas'
    },
    xAxis: {
title: {   enabled: true,   text:       ''},       categories: [{ name: 'Frentes<br><br>Frentes<br><br>Frentes<br>', categories: [
'01','02','03','04','96','97',]},{ name: 'Frentes<br><br>Frentes<br>', categories: [
'06','07',]},{ name: 'Frentes<br><br>PxP<br>', categories: [
'11','17','19','41',]},{ name: 'Frentes<br><br>Frentes<br>', categories: [
'84',]},{ name: 'Frentes<br><br>Frentes<br><br><br>', categories: [
'26',]},{ name: 'Promedio<br>', categories: [
'Promedio',]},]
    },
    yAxis: {
       min: 0,
          title: {
             text: '',
          },
          stackLabels: {
             enabled: false,
             style: {
                fontWeight:  'normal',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
             }
          }
    },
    legend: {
       align: 'left',
    },
    plotOptions: {
    spline: {dataLabels:{enabled: true}},       column: {
          stacking:   'normal',
          dataLabels: {
             enabled: true,
             formatter: function() {
                if(this.y > -1)
                   return this.point.label;
             },
            style: {                   fontWeight:  'bold',                   color:      'black',                   fontSize:   '8px''9px'          }          }
       }
    },
    series: [{
       name: 'Porcentaje1',
       data: [
{    y: 19.12,
    label: ' 19.12% ; 2,562'
},{    y: 7.13,
    label: ' 7.13% ; 857'
},{    y: 41.85,
    label: ' 41.85% ; 1,827'
},{    y: 34.94,
    label: ' 34.94% ; 5,114'
},{    y: 100.00,
    label: ' 100.00% ; 1,210'
},{    y: 95.90,
    label: ' 95.90% ; 1,211'
},{    y: 11.35,
    label: ' 11.35% ; 1,151'
},{    y: 5.99,
    label: ' 5.99% ; 538'
},{    y: 5.44,
    label: ' 5.44% ; 538'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 19.55,
    label: ' 19.55% ; 608'
},{    y: 33.20,
    label: ' 33.20% ; 971'
},{    y: 46.77,
    label: ' 46.77% ; 611'
},{    y: 20.38,
    label: ' 20.38% ; 17,202'
}
       ]
       }, {       name: ' Porcentaje2',
       data: [{    y: 80.88,
    label: ' 80.88% ; 10,841'
},{    y: 92.87,
    label: ' 92.87% ; 11,170'
},{    y: 58.15,
    label: ' 58.15% ; 2,539'
},{    y: 65.06,
    label: ' 65.06% ; 9,523'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 4.10,
    label: ' 4.10% ; 51'
},{    y: 88.65,
    label: ' 88.65% ; 8,997'
},{    y: 94.01,
    label: ' 94.01% ; 8,446'
},{    y: 94.56,
    label: ' 94.56% ; 9,373'
},{    y: 100.00,
    label: ' 100.00% ; 1,023'
},{    y: 100.00,
    label: ' 100.00% ; 96'
},{    y: 80.45,
    label: ' 80.45% ; 2,502'
},{    y: 66.80,
    label: ' 66.80% ; 1,955'
},{    y: 53.23,
    label: ' 53.23% ; 695'
},{    y: 79.62,
    label: ' 79.62% ; 67,218'
}
       ]
      },{ name: 'Meta',
       type: 'spline', color: '#FF9800',
       data: [91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00],
    }]
 });
});
tspan.highcharts-text-outline {
     display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>

<div id="grafico0" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Puedes hacer "estrictamente" lo que dices con un par de lineas de css, pero no sé si sera el resultado que pretendes conseguir, yo creo que se lee peor. El borde está precisamente para impedir que se mezclen las letras con las barras.

$(function () {
 Highcharts.setOptions({
 lang: {
 thousandsSep:  ','
 }
 });
 $('#grafico0').highcharts({
colors: ['#263238', '#00BCD4'],
    chart: {
       type: 'column'
    },
    title: {
       text: 'Horas'
    },
    xAxis: {
title: {   enabled: true,   text:       ''},       categories: [{ name: 'Frentes<br><br>Frentes<br><br>Frentes<br>', categories: [
'01','02','03','04','96','97',]},{ name: 'Frentes<br><br>Frentes<br>', categories: [
'06','07',]},{ name: 'Frentes<br><br>PxP<br>', categories: [
'11','17','19','41',]},{ name: 'Frentes<br><br>Frentes<br>', categories: [
'84',]},{ name: 'Frentes<br><br>Frentes<br><br><br>', categories: [
'26',]},{ name: 'Promedio<br>', categories: [
'Promedio',]},]
    },
    yAxis: {
       min: 0,
          title: {
             text: '',
          },
          stackLabels: {
             enabled: false,
             style: {
                fontWeight:  'normal',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
             }
          }
    },
    legend: {
       align: 'left',
    },
    plotOptions: {
    spline: {dataLabels:{enabled: true}},       column: {
          stacking:   'normal',
          dataLabels: {
             enabled: true,
             formatter: function() {
                if(this.y > -1)
                   return this.point.label;
             },
            style: {                   fontWeight:  'bold',                   color:      'black',                   fontSize:   '8px'          }          }
       }
    },
    series: [{
       name: 'Porcentaje1',
       data: [
{    y: 19.12,
    label: ' 19.12% ; 2,562'
},{    y: 7.13,
    label: ' 7.13% ; 857'
},{    y: 41.85,
    label: ' 41.85% ; 1,827'
},{    y: 34.94,
    label: ' 34.94% ; 5,114'
},{    y: 100.00,
    label: ' 100.00% ; 1,210'
},{    y: 95.90,
    label: ' 95.90% ; 1,211'
},{    y: 11.35,
    label: ' 11.35% ; 1,151'
},{    y: 5.99,
    label: ' 5.99% ; 538'
},{    y: 5.44,
    label: ' 5.44% ; 538'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 19.55,
    label: ' 19.55% ; 608'
},{    y: 33.20,
    label: ' 33.20% ; 971'
},{    y: 46.77,
    label: ' 46.77% ; 611'
},{    y: 20.38,
    label: ' 20.38% ; 17,202'
}
       ]
       }, {       name: ' Porcentaje2',
       data: [{    y: 80.88,
    label: ' 80.88% ; 10,841'
},{    y: 92.87,
    label: ' 92.87% ; 11,170'
},{    y: 58.15,
    label: ' 58.15% ; 2,539'
},{    y: 65.06,
    label: ' 65.06% ; 9,523'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 4.10,
    label: ' 4.10% ; 51'
},{    y: 88.65,
    label: ' 88.65% ; 8,997'
},{    y: 94.01,
    label: ' 94.01% ; 8,446'
},{    y: 94.56,
    label: ' 94.56% ; 9,373'
},{    y: 100.00,
    label: ' 100.00% ; 1,023'
},{    y: 100.00,
    label: ' 100.00% ; 96'
},{    y: 80.45,
    label: ' 80.45% ; 2,502'
},{    y: 66.80,
    label: ' 66.80% ; 1,955'
},{    y: 53.23,
    label: ' 53.23% ; 695'
},{    y: 79.62,
    label: ' 79.62% ; 67,218'
}
       ]
      },{ name: 'Meta',
       type: 'spline', color: '#FF9800',
       data: [91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00],
    }]
 });
});
tspan.highcharts-text-outline {
     display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>

<div id="grafico0" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Puedes hacer "estrictamente" lo que dices con un par de lineas de css, pero no sé si sera el resultado que pretendes conseguir, yo creo que se lee peor. El borde está precisamente para impedir que se mezclen las letras con las barras. He suavizado un poco los colores de las barras para evitarlo

$(function () {
 Highcharts.setOptions({
 lang: {
 thousandsSep:  ','
 }
 });
 $('#grafico0').highcharts({
colors: ['#f6b88e', '#90ec90'],
    chart: {
       type: 'column'
    },
    title: {
       text: 'Horas'
    },
    xAxis: {
title: {   enabled: true,   text:       ''},       categories: [{ name: 'Frentes<br><br>Frentes<br><br>Frentes<br>', categories: [
'01','02','03','04','96','97',]},{ name: 'Frentes<br><br>Frentes<br>', categories: [
'06','07',]},{ name: 'Frentes<br><br>PxP<br>', categories: [
'11','17','19','41',]},{ name: 'Frentes<br><br>Frentes<br>', categories: [
'84',]},{ name: 'Frentes<br><br>Frentes<br><br><br>', categories: [
'26',]},{ name: 'Promedio<br>', categories: [
'Promedio',]},]
    },
    yAxis: {
       min: 0,
          title: {
             text: '',
          },
          stackLabels: {
             enabled: false,
             style: {
                fontWeight:  'normal',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
             }
          }
    },
    legend: {
       align: 'left',
    },
    plotOptions: {
    spline: {dataLabels:{enabled: true}},       column: {
          stacking:   'normal',
          dataLabels: {
             enabled: true,
             formatter: function() {
                if(this.y > -1)
                   return this.point.label;
             },
            style: {                   fontWeight:  'bold',                   color:      'black',                   fontSize:   '9px'          }          }
       }
    },
    series: [{
       name: 'Porcentaje1',
       data: [
{    y: 19.12,
    label: ' 19.12% ; 2,562'
},{    y: 7.13,
    label: ' 7.13% ; 857'
},{    y: 41.85,
    label: ' 41.85% ; 1,827'
},{    y: 34.94,
    label: ' 34.94% ; 5,114'
},{    y: 100.00,
    label: ' 100.00% ; 1,210'
},{    y: 95.90,
    label: ' 95.90% ; 1,211'
},{    y: 11.35,
    label: ' 11.35% ; 1,151'
},{    y: 5.99,
    label: ' 5.99% ; 538'
},{    y: 5.44,
    label: ' 5.44% ; 538'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 19.55,
    label: ' 19.55% ; 608'
},{    y: 33.20,
    label: ' 33.20% ; 971'
},{    y: 46.77,
    label: ' 46.77% ; 611'
},{    y: 20.38,
    label: ' 20.38% ; 17,202'
}
       ]
       }, {       name: ' Porcentaje2',
       data: [{    y: 80.88,
    label: ' 80.88% ; 10,841'
},{    y: 92.87,
    label: ' 92.87% ; 11,170'
},{    y: 58.15,
    label: ' 58.15% ; 2,539'
},{    y: 65.06,
    label: ' 65.06% ; 9,523'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 4.10,
    label: ' 4.10% ; 51'
},{    y: 88.65,
    label: ' 88.65% ; 8,997'
},{    y: 94.01,
    label: ' 94.01% ; 8,446'
},{    y: 94.56,
    label: ' 94.56% ; 9,373'
},{    y: 100.00,
    label: ' 100.00% ; 1,023'
},{    y: 100.00,
    label: ' 100.00% ; 96'
},{    y: 80.45,
    label: ' 80.45% ; 2,502'
},{    y: 66.80,
    label: ' 66.80% ; 1,955'
},{    y: 53.23,
    label: ' 53.23% ; 695'
},{    y: 79.62,
    label: ' 79.62% ; 67,218'
}
       ]
      },{ name: 'Meta',
       type: 'spline', color: '#FF9800',
       data: [91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00],
    }]
 });
});
tspan.highcharts-text-outline {
     display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>

<div id="grafico0" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
se añadieron 39 caracteres en el cuerpo
Origen Enlace
Montaycabe
  • 1k
  • 5
  • 11

Puedes hacer "estrictamente" lo que dices con un par de lineas de css, pero no sé si sera el resultado que pretendes conseguir, yo creo que se lee peor. El borde está precisamente para impedir que se mezclen las letras con las barras.

$(function () {
 Highcharts.setOptions({
 lang: {
 thousandsSep:  ','
 }
 });
 $('#grafico0').highcharts({
colors: ['#263238', '#00BCD4'],
    chart: {
       type: 'column'
    },
    title: {
       text: 'Horas'
    },
    xAxis: {
title: {   enabled: true,   text:       ''},       categories: [{ name: 'Frentes<br><br>Frentes<br><br>Frentes<br>', categories: [
'01','02','03','04','96','97',]},{ name: 'Frentes<br><br>Frentes<br>', categories: [
'06','07',]},{ name: 'Frentes<br><br>PxP<br>', categories: [
'11','17','19','41',]},{ name: 'Frentes<br><br>Frentes<br>', categories: [
'84',]},{ name: 'Frentes<br><br>Frentes<br><br><br>', categories: [
'26',]},{ name: 'Promedio<br>', categories: [
'Promedio',]},]
    },
    yAxis: {
       min: 0,
          title: {
             text: '',
          },
          stackLabels: {
             enabled: false,
             style: {
                fontWeight:  'normal',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
             }
          }
    },
    legend: {
       align: 'left',
    },
    plotOptions: {
    spline: {dataLabels:{enabled: true}},       column: {
          stacking:   'normal',
          dataLabels: {
             enabled: true,
             formatter: function() {
                if(this.y > -1)
                   return this.point.label;
             },
            style: {                   fontWeight:  'normal''bold',                   color:      'white''black',                   fontSize:   '8px'          }          }
       }
    },
    series: [{
       name: 'Porcentaje1',
       data: [
{    y: 19.12,
    label: ' 19.12% ; 2,562'
},{    y: 7.13,
    label: ' 7.13% ; 857'
},{    y: 41.85,
    label: ' 41.85% ; 1,827'
},{    y: 34.94,
    label: ' 34.94% ; 5,114'
},{    y: 100.00,
    label: ' 100.00% ; 1,210'
},{    y: 95.90,
    label: ' 95.90% ; 1,211'
},{    y: 11.35,
    label: ' 11.35% ; 1,151'
},{    y: 5.99,
    label: ' 5.99% ; 538'
},{    y: 5.44,
    label: ' 5.44% ; 538'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 19.55,
    label: ' 19.55% ; 608'
},{    y: 33.20,
    label: ' 33.20% ; 971'
},{    y: 46.77,
    label: ' 46.77% ; 611'
},{    y: 20.38,
    label: ' 20.38% ; 17,202'
}
       ]
       }, {       name: ' Porcentaje2',
       data: [{    y: 80.88,
    label: ' 80.88% ; 10,841'
},{    y: 92.87,
    label: ' 92.87% ; 11,170'
},{    y: 58.15,
    label: ' 58.15% ; 2,539'
},{    y: 65.06,
    label: ' 65.06% ; 9,523'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 4.10,
    label: ' 4.10% ; 51'
},{    y: 88.65,
    label: ' 88.65% ; 8,997'
},{    y: 94.01,
    label: ' 94.01% ; 8,446'
},{    y: 94.56,
    label: ' 94.56% ; 9,373'
},{    y: 100.00,
    label: ' 100.00% ; 1,023'
},{    y: 100.00,
    label: ' 100.00% ; 96'
},{    y: 80.45,
    label: ' 80.45% ; 2,502'
},{    y: 66.80,
    label: ' 66.80% ; 1,955'
},{    y: 53.23,
    label: ' 53.23% ; 695'
},{    y: 79.62,
    label: ' 79.62% ; 67,218'
}
       ]
      },{ name: 'Meta',
       type: 'spline', color: '#FF9800',
       data: [91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00],
    }]
 });
});
tspan.highcharts-text-outline {
     display: none;
}

tspan {
   fill: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>

<div id="grafico0" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Puedes hacer "estrictamente" lo que dices con un par de lineas de css, pero no sé si sera el resultado que pretendes conseguir, yo creo que se lee peor

$(function () {
 Highcharts.setOptions({
 lang: {
 thousandsSep:  ','
 }
 });
 $('#grafico0').highcharts({
colors: ['#263238', '#00BCD4'],
    chart: {
       type: 'column'
    },
    title: {
       text: 'Horas'
    },
    xAxis: {
title: {   enabled: true,   text:       ''},       categories: [{ name: 'Frentes<br><br>Frentes<br><br>Frentes<br>', categories: [
'01','02','03','04','96','97',]},{ name: 'Frentes<br><br>Frentes<br>', categories: [
'06','07',]},{ name: 'Frentes<br><br>PxP<br>', categories: [
'11','17','19','41',]},{ name: 'Frentes<br><br>Frentes<br>', categories: [
'84',]},{ name: 'Frentes<br><br>Frentes<br><br><br>', categories: [
'26',]},{ name: 'Promedio<br>', categories: [
'Promedio',]},]
    },
    yAxis: {
       min: 0,
          title: {
             text: '',
          },
          stackLabels: {
             enabled: false,
             style: {
                fontWeight:  'normal',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
             }
          }
    },
    legend: {
       align: 'left',
    },
    plotOptions: {
    spline: {dataLabels:{enabled: true}},       column: {
          stacking:   'normal',
          dataLabels: {
             enabled: true,
             formatter: function() {
                if(this.y > -1)
                   return this.point.label;
             },
            style: {                   fontWeight:  'normal',                   color:      'white',                   fontSize:   '8px'          }          }
       }
    },
    series: [{
       name: 'Porcentaje1',
       data: [
{    y: 19.12,
    label: ' 19.12% ; 2,562'
},{    y: 7.13,
    label: ' 7.13% ; 857'
},{    y: 41.85,
    label: ' 41.85% ; 1,827'
},{    y: 34.94,
    label: ' 34.94% ; 5,114'
},{    y: 100.00,
    label: ' 100.00% ; 1,210'
},{    y: 95.90,
    label: ' 95.90% ; 1,211'
},{    y: 11.35,
    label: ' 11.35% ; 1,151'
},{    y: 5.99,
    label: ' 5.99% ; 538'
},{    y: 5.44,
    label: ' 5.44% ; 538'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 19.55,
    label: ' 19.55% ; 608'
},{    y: 33.20,
    label: ' 33.20% ; 971'
},{    y: 46.77,
    label: ' 46.77% ; 611'
},{    y: 20.38,
    label: ' 20.38% ; 17,202'
}
       ]
       }, {       name: ' Porcentaje2',
       data: [{    y: 80.88,
    label: ' 80.88% ; 10,841'
},{    y: 92.87,
    label: ' 92.87% ; 11,170'
},{    y: 58.15,
    label: ' 58.15% ; 2,539'
},{    y: 65.06,
    label: ' 65.06% ; 9,523'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 4.10,
    label: ' 4.10% ; 51'
},{    y: 88.65,
    label: ' 88.65% ; 8,997'
},{    y: 94.01,
    label: ' 94.01% ; 8,446'
},{    y: 94.56,
    label: ' 94.56% ; 9,373'
},{    y: 100.00,
    label: ' 100.00% ; 1,023'
},{    y: 100.00,
    label: ' 100.00% ; 96'
},{    y: 80.45,
    label: ' 80.45% ; 2,502'
},{    y: 66.80,
    label: ' 66.80% ; 1,955'
},{    y: 53.23,
    label: ' 53.23% ; 695'
},{    y: 79.62,
    label: ' 79.62% ; 67,218'
}
       ]
      },{ name: 'Meta',
       type: 'spline', color: '#FF9800',
       data: [91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00],
    }]
 });
});
tspan.highcharts-text-outline {
     display: none;
}

tspan {
   fill: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>

<div id="grafico0" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Puedes hacer "estrictamente" lo que dices con un par de lineas de css, pero no sé si sera el resultado que pretendes conseguir, yo creo que se lee peor. El borde está precisamente para impedir que se mezclen las letras con las barras.

$(function () {
 Highcharts.setOptions({
 lang: {
 thousandsSep:  ','
 }
 });
 $('#grafico0').highcharts({
colors: ['#263238', '#00BCD4'],
    chart: {
       type: 'column'
    },
    title: {
       text: 'Horas'
    },
    xAxis: {
title: {   enabled: true,   text:       ''},       categories: [{ name: 'Frentes<br><br>Frentes<br><br>Frentes<br>', categories: [
'01','02','03','04','96','97',]},{ name: 'Frentes<br><br>Frentes<br>', categories: [
'06','07',]},{ name: 'Frentes<br><br>PxP<br>', categories: [
'11','17','19','41',]},{ name: 'Frentes<br><br>Frentes<br>', categories: [
'84',]},{ name: 'Frentes<br><br>Frentes<br><br><br>', categories: [
'26',]},{ name: 'Promedio<br>', categories: [
'Promedio',]},]
    },
    yAxis: {
       min: 0,
          title: {
             text: '',
          },
          stackLabels: {
             enabled: false,
             style: {
                fontWeight:  'normal',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
             }
          }
    },
    legend: {
       align: 'left',
    },
    plotOptions: {
    spline: {dataLabels:{enabled: true}},       column: {
          stacking:   'normal',
          dataLabels: {
             enabled: true,
             formatter: function() {
                if(this.y > -1)
                   return this.point.label;
             },
            style: {                   fontWeight:  'bold',                   color:      'black',                   fontSize:   '8px'          }          }
       }
    },
    series: [{
       name: 'Porcentaje1',
       data: [
{    y: 19.12,
    label: ' 19.12% ; 2,562'
},{    y: 7.13,
    label: ' 7.13% ; 857'
},{    y: 41.85,
    label: ' 41.85% ; 1,827'
},{    y: 34.94,
    label: ' 34.94% ; 5,114'
},{    y: 100.00,
    label: ' 100.00% ; 1,210'
},{    y: 95.90,
    label: ' 95.90% ; 1,211'
},{    y: 11.35,
    label: ' 11.35% ; 1,151'
},{    y: 5.99,
    label: ' 5.99% ; 538'
},{    y: 5.44,
    label: ' 5.44% ; 538'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 19.55,
    label: ' 19.55% ; 608'
},{    y: 33.20,
    label: ' 33.20% ; 971'
},{    y: 46.77,
    label: ' 46.77% ; 611'
},{    y: 20.38,
    label: ' 20.38% ; 17,202'
}
       ]
       }, {       name: ' Porcentaje2',
       data: [{    y: 80.88,
    label: ' 80.88% ; 10,841'
},{    y: 92.87,
    label: ' 92.87% ; 11,170'
},{    y: 58.15,
    label: ' 58.15% ; 2,539'
},{    y: 65.06,
    label: ' 65.06% ; 9,523'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 4.10,
    label: ' 4.10% ; 51'
},{    y: 88.65,
    label: ' 88.65% ; 8,997'
},{    y: 94.01,
    label: ' 94.01% ; 8,446'
},{    y: 94.56,
    label: ' 94.56% ; 9,373'
},{    y: 100.00,
    label: ' 100.00% ; 1,023'
},{    y: 100.00,
    label: ' 100.00% ; 96'
},{    y: 80.45,
    label: ' 80.45% ; 2,502'
},{    y: 66.80,
    label: ' 66.80% ; 1,955'
},{    y: 53.23,
    label: ' 53.23% ; 695'
},{    y: 79.62,
    label: ' 79.62% ; 67,218'
}
       ]
      },{ name: 'Meta',
       type: 'spline', color: '#FF9800',
       data: [91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00],
    }]
 });
});
tspan.highcharts-text-outline {
     display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>

<div id="grafico0" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Origen Enlace
Montaycabe
  • 1k
  • 5
  • 11

Puedes hacer "estrictamente" lo que dices con un par de lineas de css, pero no sé si sera el resultado que pretendes conseguir, yo creo que se lee peor

$(function () {
 Highcharts.setOptions({
 lang: {
 thousandsSep:  ','
 }
 });
 $('#grafico0').highcharts({
colors: ['#263238', '#00BCD4'],
    chart: {
       type: 'column'
    },
    title: {
       text: 'Horas'
    },
    xAxis: {
title: {   enabled: true,   text:       ''},       categories: [{ name: 'Frentes<br><br>Frentes<br><br>Frentes<br>', categories: [
'01','02','03','04','96','97',]},{ name: 'Frentes<br><br>Frentes<br>', categories: [
'06','07',]},{ name: 'Frentes<br><br>PxP<br>', categories: [
'11','17','19','41',]},{ name: 'Frentes<br><br>Frentes<br>', categories: [
'84',]},{ name: 'Frentes<br><br>Frentes<br><br><br>', categories: [
'26',]},{ name: 'Promedio<br>', categories: [
'Promedio',]},]
    },
    yAxis: {
       min: 0,
          title: {
             text: '',
          },
          stackLabels: {
             enabled: false,
             style: {
                fontWeight:  'normal',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
             }
          }
    },
    legend: {
       align: 'left',
    },
    plotOptions: {
    spline: {dataLabels:{enabled: true}},       column: {
          stacking:   'normal',
          dataLabels: {
             enabled: true,
             formatter: function() {
                if(this.y > -1)
                   return this.point.label;
             },
            style: {                   fontWeight:  'normal',                   color:      'white',                   fontSize:   '8px'          }          }
       }
    },
    series: [{
       name: 'Porcentaje1',
       data: [
{    y: 19.12,
    label: ' 19.12% ; 2,562'
},{    y: 7.13,
    label: ' 7.13% ; 857'
},{    y: 41.85,
    label: ' 41.85% ; 1,827'
},{    y: 34.94,
    label: ' 34.94% ; 5,114'
},{    y: 100.00,
    label: ' 100.00% ; 1,210'
},{    y: 95.90,
    label: ' 95.90% ; 1,211'
},{    y: 11.35,
    label: ' 11.35% ; 1,151'
},{    y: 5.99,
    label: ' 5.99% ; 538'
},{    y: 5.44,
    label: ' 5.44% ; 538'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 19.55,
    label: ' 19.55% ; 608'
},{    y: 33.20,
    label: ' 33.20% ; 971'
},{    y: 46.77,
    label: ' 46.77% ; 611'
},{    y: 20.38,
    label: ' 20.38% ; 17,202'
}
       ]
       }, {       name: ' Porcentaje2',
       data: [{    y: 80.88,
    label: ' 80.88% ; 10,841'
},{    y: 92.87,
    label: ' 92.87% ; 11,170'
},{    y: 58.15,
    label: ' 58.15% ; 2,539'
},{    y: 65.06,
    label: ' 65.06% ; 9,523'
},{    y: 0.00,
    label: ' 0.00% ; 0'
},{    y: 4.10,
    label: ' 4.10% ; 51'
},{    y: 88.65,
    label: ' 88.65% ; 8,997'
},{    y: 94.01,
    label: ' 94.01% ; 8,446'
},{    y: 94.56,
    label: ' 94.56% ; 9,373'
},{    y: 100.00,
    label: ' 100.00% ; 1,023'
},{    y: 100.00,
    label: ' 100.00% ; 96'
},{    y: 80.45,
    label: ' 80.45% ; 2,502'
},{    y: 66.80,
    label: ' 66.80% ; 1,955'
},{    y: 53.23,
    label: ' 53.23% ; 695'
},{    y: 79.62,
    label: ' 79.62% ; 67,218'
}
       ]
      },{ name: 'Meta',
       type: 'spline', color: '#FF9800',
       data: [91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00,91.00],
    }]
 });
});
tspan.highcharts-text-outline {
     display: none;
}

tspan {
   fill: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>

<div id="grafico0" style="min-width: 310px; height: 400px; margin: 0 auto"></div>