'ngx-chart does not apply card number style

am using the ngx-charts library to represent information, I need to use a specific chart but the style does not fit the same as the example that I present below:

https://stackblitz.com/edit/vertical-bar-chart-bwghvr?embed=1&file=app/app.component.ts

my data:

 colorScheme = {
   domain: ['#FFE800', '#E44D25', '#CFC0BB']
 };

 cardColor: string = '#232837';
 data: any[] = [
  {
    name: "Chile",
    value: "2000"
  },
  {
    name: "Argentina",
    value: "1500"
  },
  {
    name: "Holanda",
    value: "751"
  }
];

And my html:

  <div class="row">
    <div class="col-md-12">
        <ngx-charts-number-card
          [view]="[700, 200]"
          [scheme]="colorScheme"
          [results]="data"
          [cardColor]="cardColor"
          [animations]="true"
          [bandColor]="'#00FF48'"
          [innerPadding]="20">
        </ngx-charts-number-card>
     </div>
  </div>

but result is

enter image description here

as you can see the cards are not separated

cssangularcard


Solution 1:[1]

Probably im late, but, main problem in your HTML you are using another chart ngx-charts-number-card You need to cover your HTML inside ngx-charts-bar-vertical

Use this code for bar chart

<ngx-charts-bar-vertical
  [view]="[700, 200]"
  [scheme]="colorScheme"
  [results]="data"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis">
</ngx-charts-bar-vertical>

Read docs and all we be clear https://swimlane.gitbook.io/ngx-charts/examples/bar-charts/vertical-bar-chart

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Aleks_thunder

Related Questions