I have created a bar chart with line chart in ng2-charts and have the
following problem:
I have inserted two y axes, but the second axis (right) can not be properly
mapped to the line chart. Do you know how that works? I inserted the code
as a pic.
HTML:
<div class="col-lg-6">
<div class="card">
<div class="card-header text-white bg-primary">
<h5 class="header-center text-white">Monatliche
Personalentwicklung</h5>
</div>
<div class="card-body">
<div class="chart-wrapper">
<canvas baseChart class="chart"
[datasets]="StaffData"
[labels]="StaffLabels"
[options]="StaffOptions"
[colors]="StaffColours"
[legend]="StaffLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
</div>
</div>
TS:
// Daten
public StaffData: any[] = [{
label: 'IN',
type: 'bar',
yAxesID: "y-axis-1",
data: [3, 11, 10, 6, 9, 28, 45, 40, 26, 3, 10, 6],
},
{
label: 'OUT',
type: 'bar',
yAxesID: "y-axis-1",
data: [2, 0, 3, 7, 11, 13, 8, 44, 35, 3, 46, 1],
},
{
label: 'Total',
type: 'line',
yAxesID: "y-axis-2",
data: [0, 30, 62, 100, 100, 100, 114, 77, 57, 54, 10, 10]
}];
// x-Achse (Monate)
public StaffLabels: string[] = ['Jan', 'Feb', 'Mrz', 'Apr', 'Mai', 'Jun',
'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'];
// Gestaltung des Diagramms
public StaffColours: Array<any> = [
{
backgroundColor: 'rgba(0, 204, 0, 0.2)',
borderColor: 'rgba(0, 204, 0,1)',
borderWidth: 1
},
{
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
},
{
backgroundColor: "rgba(255,255,255,0.5)",
borderColor: 'rgba(255, 93, 0, 0.6)',
borderWidth: 2
}
];
// Anzeige der Legende
public StaffLegend = true;
// Anzeige des Diagramms
public barChartType = 'bar';
// Optionen
public StaffOptions: any = {
scales: {
yAxes: [{
id: "y-axis-1",
position: 'left',
type: 'linear',
ticks: {
beginAtZero:true
},
scaleLabel: {
display: true,
labelString: 'Throughput'
}
},
{
id: "y-axis-2",
position: 'right',
type: 'linear',
ticks: {
beginAtZero:true,
labelString: 'Attendace'
}
}]
}
};
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
