3

I am using ngx-charts in my angular application.

I am using a vertical bar chart to display. I am having name as date and value as number, i.e

export class VBChartData {
    name: string;
    value: number;
}

The VB chart component is,

export class VbChartComponent implements OnInit{
 public data: VBChartData[] = [];
 view: any[] = [1000, 500];
 public activeToday: string[] = [];
 showXAxis = true;
   showYAxis = true;
   gradient = false;
   showLegend = true;
   showXAxisLabel = true;
   xAxisLabel = 'Date';
   showYAxisLabel = true;
   yAxisLabel = 'Rides';
   colorScheme = {
    domain: ['#448AFF']
  };
  constructor() {
     const tdate = Date.now();
    this.todayDate = new DatePipe('en-Us').transform(tdate, 'yyyy-MM-dd');
    this.activeToday.push(this.todayDate);
    this.activeToday.push('2018-06-15');
   // getting the this.data as array from the service
   Object.assign(this.data);
  }

ngOnInit() {
  }

  onSelect(event) {
    console.log(event);
  }
}

Chart html is,

<ngx-charts-bar-vertical
  [view]="view"
  [scheme]="colorScheme"
  [results]="data"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [legend]="showLegend"
  [legendTitle]="title"
  [animations]="true" 
  [activeEntries]="activeToday"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  (select)="onSelect($event)">
</ngx-charts-bar-vertical>

Here the activeEntries is updated with activeToday, updated in component.

But In chart, the highlighting is not happening. Please correct me if I am wrong.

Anil
  • 1,748
  • 8
  • 32
  • 67

0 Answers0