angularchartsangular5jscharts

Stacker horizontal bar chart not showing proper data if name is repeated


I am using stacker horizontal bar chart to display employee names and bills assigned to them. But when to employees has the same name it will not display both of them . it will display only last binded employee in chart.

export var multi = [  
  {
    "name": "sam",
    "series": [
      {  
        "name": "Bills",
        "value": 100
      },
    ],
  },
  {
    "name": "sam",
    "series": [
      {
        "name": "Bills",
        "value": 90
      }
    ]
  },
  {
    "name": "john",
    "series": [
      {
        "name": "Bills",
        "value": 80
      }
    ]
  }
];

Below is what i am getting as output

You can recreate it by pasting above data in data.ts file of https://embed.plnkr.co/UHQVvMUmxsieiYITMVPq?show=preview


Solution

  • You can do bit of trick here,

     <ng-template #tooltipTemplate let-model="model">
            <span class="tooltip-label">{{model.series.startsWith('sam') ? 'sam' : model.series}} / {{model.name}}</span>
            <span class="tooltip-val">{{model.value}}</span>
     </ng-template>
    

    DEMO