How to show only one line in time in a multiple datasets in line-chart js

user_4424698 0
Viewed 388

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.

enter image description here enter image description here enter image description here

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
    }
  ];
angular linechart node.js charts javascript
2 Answers

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
  }
];
user_50907710 
  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.

user_44246980
Related