0

Estoy intentando eliminar el contorno blanco de los números en cada columna y agregar separador de miles en estos mismos números.

Me podrían ayudar indicandome como hacerlo.

Muchas gracias.

var contador = 0;
var contador2 = 0;
var arreglo = [];
Highcharts.chart('resumencontainer', {
  colors: ['#01579B', '#FFFF00', '#006064'],
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Ingreso'
  },
  subtitle: {},
  xAxis: {
    categories: ['Empresa'],
    title: {
      text: null
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Toneladas',
      align: 'high'
    },
    labels: {
      overflow: 'justify'
    }
  },
  tooltip: {
    valueSuffix: ' Tons'
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        borderRadius: 1,
        backgroundColor: '#BDBDBD',
        borderWidth: 1,
        borderColor: '#AAA',
        y: -6
      }
    },
    bar: {
      dataLabels: {
        enabled: true,
        formatter: function() {
          var color = 'Black';
          if (this.series.name == "Cuota Por Hora") {
            arreglo[contador] = this.y;
            contador = contador + 1;
          }
          if (this.series.name == "Cuota Ingresada") {
            var meta = arreglo[contador2];
            var cuota = this.y;
            if (cuota > meta) {
              color = 'green';
            } else if (cuota < meta / 100 * 80) {
              color = 'red';
            } else if (cuota < meta) {
              color = '#FFD600';
            }
            contador2 = contador2 + 1;
          }
          return '<span style="color: ' + color + '">' + Highcharts.numberFormat(this.y,2,'.',',') + ' </span>';
        },
      }
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -40,
    y: 50,
    floating: true,
    borderWidth: 1,
    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#ECEFF1'),
    shadow: true
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Meta Del Día',
    data: [13900.00]
  }, {
    name: 'Cuota Por Hora',
    data: [2316.67]
  }, {
    name: 'Cuota Ingresada',
    data: [2049.75]
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="resumencontainer" style="height: 300px"></div>

2

1 respuesta 1

0

Logré cambiar el formato de los números con:

Highcharts.numberFormat(this.y,2,'.',',');

Eliminar el TextShadow se puede eliminar de dos maneras, dependiendo la versión de la librería.

En versiones anteriores a la 5.0.3 se llama TextShadow

plotOptions: {
    columnrange: {
        dataLabels: {
            enabled: true,
            color: 'red',
            style: {
                textShadow: false 
            }
        }
    }
},

y en la versión 5.0.3 es TextOutline:

plotOptions: {
    columnrange: {
        dataLabels: {
            enabled: true,
            color: 'red',
            style: {
                textOutline: false 
            }
        }
    }
},

Aquí ya resuelto:

var contador = 0;
var contador2 = 0;
var arreglo = [];
Highcharts.chart('resumencontainer', {
  colors: ['#01579B', '#FFFF00', '#006064'],
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Ingreso'
  },
  subtitle: {},
  xAxis: {
    categories: ['Empresa'],
    title: {
      text: null
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Toneladas',
      align: 'high'
    },
    labels: {
      overflow: 'justify'
    }
  },
  tooltip: {
    valueSuffix: ' Tons'
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        borderRadius: 1,
        backgroundColor: '#BDBDBD',
        borderWidth: 1,
        borderColor: '#AAA',
        y: -6
      }
    },
    bar: {
      dataLabels: {
        enabled: true,
         style: {
                    textOutline: false 
                },
        formatter: function() {
          var color = 'Black';
          if (this.series.name == "Cuota Por Hora") {
            arreglo[contador] = this.y;
            contador = contador + 1;
          }
          if (this.series.name == "Cuota Ingresada") {
            var meta = arreglo[contador2];
            var cuota = this.y;
            if (cuota > meta) {
              color = 'green';
            } else if (cuota < meta / 100 * 80) {
              color = 'red';
            } else if (cuota < meta) {
              color = '#FFD600';
            }
            contador2 = contador2 + 1;
          }
          return '<span style="color: ' + color + '">' + Highcharts.numberFormat(this.y,2,'.',',') + ' </span>';
        },
      }
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -40,
    y: 50,
    floating: true,
    borderWidth: 1,
    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#ECEFF1'),
    shadow: true
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Meta Del Día',
    data: [13900.00]
  }, {
    name: 'Cuota Por Hora',
    data: [2316.67]
  }, {
    name: 'Cuota Ingresada',
    data: [2049.75]
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="resumencontainer" style="height: 300px"></div>

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.