Question 286027 in Javascript Question posted in
A very good W3school tutorial can be found here.

How can I format a value with thousands (,) in the DataTable, I am using the JavaScript highcharts.com library?

I am trying to format my dataTable with thousands or with (,). but I have not been able to, I have seen forums and I have not been able to, I will share my code with you. The variable Venta is theq
I want to format data: sale both in the graph and in the dataTable.

<div class="">
    <figure class="highcharts-figure">
        <div id="container"></div>
    </figure>
</div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script>
Highcharts.chart('container', {
     chart: {
         type: 'column'
     },
     title: {
         text: 'Ventas Mensuales',
         align: 'left',
         style: {
             fontSize: '16px' 
         }
     },
     xAxis: {
         categories: mes, // What returns mes is ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre','Octubre', 'Noviembre', 'Diciembre'];
         crosshair: true,
         accessibility: {
             description: 'Meses'
         }
     },
     yAxis: {
         min: 0,
         title: {
             text: 'Ventas Mensuales'
         }
     },
     tooltip: {
         valueSuffix: ' (COP)'
     },
     plotOptions: {
         column: {
             pointPadding: 0.2,
             borderWidth: 0,
             dataLabels: {
                 enabled: true,
                 formatter: function() {
                     return '$' + Highcharts.numberFormat(this.y, 0);
                 }
             }
         }
     },
     series: [{
         name: 'Ventas',
         data: venta // What returns is ['1356940858.000000', '1945419126.000000', '934706589.000000', '1803607453.000000', '78415027.000000'] 
         // data: valoresY
     }],
     data: {
         table: 'datatable'
     },
     exporting: {
         tableCaption: "Tabla de Ventas Mensualesss"
     }

 });
</script>```

Esperaba el valor del dataTable export formateado en miles
Tags:

2

Answers


  1. 0

    If you want the chart values to have thousands separator you can set them by setting global options:

    Highcharts.setOptions({
    lang: {thousandsSep: ','}
});

    If you want to format label, you can pass custom formatting after the value so in your case:

    yAxis: {
    labels: {
        format: '{value:,.0f}'
    }
}

    Put all together example:

    Highcharts.setOptions({
  lang: {
    thousandsSep: ','
  }
});
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  yAxis: {
    labels: {
      format: '{value:,.0f}'
    }
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
  },
  series: [{
    data: [1000000, 2000000, 3000000, 4000000, 5000000]
  }]
});
    <div class="">
<figure class="highcharts-figure">
    <div id="container"></div>
</figure>
</div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
    Login or Signup to reply.
  2. 0

    You could extend the export-data module to do formatting on the values that are presented in the data table, for example like this (see JSFiddle demonstration):

    (function(H) {
  const Chart = H.Chart;
  H.wrap(Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
    const result = proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    for (const x of result) {
      console.log(x, x.length)
      for (let i = 1; i < x.length; i++) {
        if (typeof x[i] === 'number') {
          x[i] = "$" + H.numberFormat(x[i], 0)
        }
      }
    }
}(Highcharts));

Highcharts.chart('container', {
  series: [{
    data: [100000, 200000, 300000, 400000, 500000, 600000, 700000, 800000, 900000, 1000000]
  }],
});

    The caveat here is that it breaks sorting by that column, because it no longer compares numbers, but rather it compares strings. The simple approach to this is to disable sorting with allowTableSorting (API). A complicated variation is to only disable sorting by the series values, which is another extension, for example like this (included in JSFiddle above):

    (function(H) {
  H.addEvent(Chart, 'afterViewData', function() {
    const div = this.dataTableDiv
    const row = div.querySelector('thead tr');
    if (row) {
      for (let x = 1; x < row.childNodes.length; x++) {
        const th = row.childNodes[x]
        const table = th.closest('table');
        th.addEventListener('click', function(e) {
          e.stopImmediatePropagation();
        });
      }
    }
  }, {
    order: -1
  });
}(Highcharts));
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search