Cannot read property 'toLocaleString' of undefined. Angular 5 ngx-charts

Question

Console log Cannot read property 'toLocaleString' of undefinedon my component.ts i am using this method to take the data from json

getChartProducts() {

        this.TicketService.getAlladminPage(this.number, this.size, this.sort, this.orderByColumn)
          .subscribe(
            (chart: any[]) => {

              let item = 0;

              if (chart['content']) {
                while(item < chart['content'].length){

                  let chartItem = {
                    'name' : chart['content'][item].name,
                    'price': chart['content'][item].price
                  };

                  this.chart.push(chartItem);
                  item ++;
                }

                console.log( this.chart);
              }
            });

      }`

i also set

`
     chart: { name :string, price :number}[] = [];
view: any[] = [700, 400];

  // options
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = true;
  showYAxisLabel = true;`

and my HTML

` <ngx-charts-bar-vertical
                                [view]="view"
                                [scheme]="colorScheme"
                                [results]="chart"
                                [gradient]="gradient"
                                [xAxis]="showXAxis"
                                [yAxis]="showYAxis"
                                [legend]="showLegend"
                                [showXAxisLabel]="showXAxisLabel"
                                [showYAxisLabel]="showYAxisLabel"
                                [xAxisLabel]="xAxisLabel"
                                [yAxisLabel]="yAxisLabel"
                                (select)="onSelect($event)">
                              </ngx-charts-bar-vertical>`

Any idea for this error? i tried chart: { "name":string, "price" :number}[] = []; but again the same error

I am using Angular CLI: 1.7.4 Node: 8.11.2 OS: win32 x64 Angular: 5.0.2 "@swimlane/ngx-charts": "7.4.0",

Your error says `Cannot read property 'toLocaleString' of undefined`, which means somewhere the code is trying to call `toLocaleString`. In that error, there is probably whats called a stack-trace, which will show where the error occured. Can you add the whole error to your question? — user184994, Jul 08 '18 at 09:47
So it looks like, in your SeriesVerticalComponent, you have a function called `update`. Can you add that code (and any relevant code that it calls into) please? — user184994, Jul 08 '18 at 09:55
@user184994 this component is from the ngx-charts library. From series-vertical-component.js : SeriesVerticalComponent.prototype.ngOnChanges = function (changes) { this.update(); }; — Tzimpo, Jul 08 '18 at 10:03
Can you `console.log` the value you're passing in for the data (i.e. your `chart` value) please? It looks like you may have an undefined value in there — user184994, Jul 08 '18 at 10:09
It looks like `ngx-charts` is expecting each entry to have a property called `value`, but your data doesn't. It only has a property called `price` — user184994, Jul 08 '18 at 10:14

Count Spatula · Accepted Answer · 2019-03-10T02:05:37.963

10

For a Grouped Vertical Bar Chart, you need to use:

ngx-charts-bar-vertical-2d

Rather than:

ngx-charts-bar-vertical

edited Mar 10 '19 at 02:05

answered Aug 17 '18 at 15:27

Count Spatula

116
5

1

I assume that meant ngx-charts-bar-vertical-2d – Diego Sarmiento Mar 08 '19 at 21:22
Diego, yes, your assumption is correct. Thanks for catching this, I've updated the response accordingly. Note that the naming pattern is the same whether horizontal or vertical. – Count Spatula Mar 10 '19 at 02:06

user184994 · Answer 2 · 2018-07-08T10:31:49.647

1

Your data needs to have a property called value, but your data only has a property called price.

Just update your data to include a value property, and it should work.

edited Jul 08 '18 at 10:31

answered Jul 08 '18 at 10:18

user184994

17,791
1
46
52

score 0 · Answer 3 · answered Aug 13 '18 at 11:29

the above error still occurs for charts such as Grouped Vertical Bar Chart, Grouped Horizontal Bar Chart etc this looks like a bug from ngx-charts
the input for this is 

[
  {
    "name": "Germany",
    "series": [
      {
        "name": "2010",
        "value": 7300000
      },
      {
        "name": "2011",
        "value": 8940000
      }
    ]
  },

  {
    "name": "USA",
    "series": [
      {
        "name": "2010",
        "value": 7870000
      },
      {
        "name": "2011",
        "value": 8270000
      }
    ]
  }
]

they expect value in the outer array, but if we send value their, there is no meaning

i.e [
{
"name": "Germany",
"value": 234324,
"series": [
]
},
...
]

Cannot read property 'toLocaleString' of undefined. Angular 5 ngx-charts

3 Answers3