Answer the question
In order to leave comments, you need to log in
How to display two or more bars on a chart?
How to group several bars on the chart, how is it done here ? That is, suppose that I have a value state_time
in the labels, how can I make it so that the columns are displayed density
for visconsity
this value in the graph? At the moment, my graph only displays the density value for the label state_time
on the graph, but how can I add it so that it also displays and visconsity
? I tried to add this value to the chart, but the label displays undefined all the time, and does not display the information for it at all.
import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { StateService } from '../../../shared/services/state.service';
import { State } from '../../../shared/interfaces';
import { Chart } from 'chart.js';
@Component({
selector: 'app-state',
templateUrl: './state.component.html',
styleUrls: ['./state.component.css']
})
export class StateComponent implements AfterViewInit {
@Input('reports_id') reports_id: string
@ViewChild('state') stateRef: ElementRef
constructor(
private stateService: StateService
) { }
ngAfterViewInit() {
const stateConfig: any = {
label: 'Density',
backgroundColor: '#009688',
borderColor: '#00796b'
}
this.stateService.fetch(this.reports_id).subscribe((data: State[]) => {
stateConfig.data = data.map(item => item.density)
stateConfig.labels = data.map(item => item.state_time)
const stateCtx = this.stateRef.nativeElement.getContext('2d')
new Chart(stateCtx, createChartConfig(stateConfig))
}
)
}
function createChartConfig({labels, data, label, borderColor, backgroundColor}) {
return {
type: 'bar',
options: {
scales: {
xAxes: [{
gridLines: {
offsetGridLines: true
}
}]
}},
data: {
labels,
datasets: [
{
label, data,
backgroundColor: backgroundColor,
borderColor: borderColor,
borderWidth: 1
}
]
}
}
}
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question