0
137
ViewsHow to show only one line in time in a multiple datasets in line-chart js
I have two lines in my charts.js graph. One is in scale from 1-10 and the other is 100 000-1 000 000 000. I would like to have them in one graph, not two, but not to show them in the same time because they are then only one strait line.
Is it possible to show one or the other line in chart configuration? When I turn the first, the second would automatic hide and vice versa. The first picture could confuse a user. I want when loading for a first time, to show like in pic2 or pic3.
This is my chart code:
public barChartOptions: ChartOptions = {
indexAxis: 'x',
responsive: true,
plugins: {}
};
public barChartLabels: string[] = this.xLabels;
public barChartType: ChartType = 'line';
public barChartLegend = true;
public barChartData: ChartDataset[] = [
{
data: [],
backgroundColor: 'green',
borderColor: 'rgb(75, 192, 192)',
label: 'Volume [m3]',
fill: false,
},
{
data: [],
backgroundColor: 'red',
borderColor: 'rgb(255, 127, 127)',
label: 'Flow [m3/h]',
fill: false
}
];
2 answers
Answer question0
use dataset option hidden
public barChartData: ChartDataset[] = [
{
data: [],
backgroundColor: 'green',
borderColor: 'rgb(75, 192, 192)',
label: 'Volume [m3]',
fill: false,
hidden: false // <-- shown
},
{
data: [],
backgroundColor: 'red',
borderColor: 'rgb(255, 127, 127)',
label: 'Flow [m3/h]',
fill: false,
hidden: true // <-- hidden
}
];
0
isHiden = false;
public barChartOptions: ChartOptions = {
indexAxis: 'x',
responsive: true,
plugins: {
legend: {
onClick: this.toggleLegendClickHandler
}
}
};
public barChartLabels: string[] = this.xLabels;
public barChartType: ChartType = 'line';
public barChartLegend = true;
public barChartData: ChartDataset[] = [
{
data: [],
backgroundColor: 'green',
borderColor: 'rgb(75, 192, 192)',
label: 'Cumulative [m3]',
fill: false,
hidden: this.isHiden
},
{
data: [],
backgroundColor: 'red',
borderColor: 'rgb(255, 127, 127)',
label: 'Flow [m3/h]',
fill: false,
hidden: !this.isHiden
}
];
I updated original onClick() handler for legend::
toggleLegendClickHandler(e: ChartEvent, legendItem: LegendItem, legend: any): void {
let index = legendItem.datasetIndex;
let indexOther: number = (index === 0) ? 1 : 0;
console.log("legendItem.datasetIndex: " + index + " indexOther: " + indexOther);
const ci = legend.chart;
if (ci.isDatasetVisible(index)) {
ci.hide(index);
legendItem.hidden = true;
ci.show(indexOther);
} else {
ci.show(index);
legendItem.hidden = false;
ci.hide(indexOther);
}
}
Now, only one legendItem can be active, the other is crossed. If you click the other, it becomes visible, the first one is crossed. It's or or and can't be together off or on. Maybe this could be added to chartsjs as a permanent option: toggleLegend.