1

Estoy intentando eliminar el fondo negro de las letras que aparecen en cada columna, para poder hacer legible el dato pero no lo logro.

Si pueden ayudarme muchas gracias.

$(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],
    }]
 });
});
<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>

Lo que busco es poder eliminar el fondo de estas letras:

Imagen

Mostrar esas letras sin el contorno.

2 respuestas 2

5
+50

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>

1

¿Te refieres a algo como esto?

$(function () {
 Highcharts.setOptions({
 lang: {
 thousandsSep:  ','
 }
 });
 $('#grafico0').highcharts({
colors: ['#f6f2f8', '#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],
    }]
 });
});
<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>

2
  • Hola @fredyfx lo que busco eliminar es el contorno de las letras, para dejarlas mas legibles. Actualice mi pregunta. Gracias por tu ayuda Commented el 26 feb. 2019 a las 20:39
  • hey bro @raintrooper con la edición ya te entendí, llegué tarde para actualizar xD! ¡siguiente pregunta con fuerza! Me alegra que hayas solucionado tu caso :D
    – fredyfx
    Commented el 26 feb. 2019 a las 22:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.