few line chart's Legend is being display-CodePudding

Hi I am using line chart and highcharts version 8.0.0

i observe one issue here- I am sending array of 2 data in series but graph is showing only one legend which will misguide to user that it has only one data-

    this.dateHeaderArray = ['Jan 2021', 'Feb 2021', 'Mar 2021', 'Apr 2021', 'May 2021', 'Jun 2021', 'Jul 2021', 'Aug 2021', 'Sep 2021', 'Oct 2021', 'Nov 2021', 'Dec 2021'];

this.seriesDataArray = [
    {
        "name": "a_c5af-4825-86df-bc5_7161-4142-ad77-04d",
        "type": "line",
        "data": [ null,null,null,null,null,null,null, null, null, null,null,null],
        "point": {
            "events": {}
        }
    },
    {
        "name": "a_c5af-4825-86df-bc5_47b6-4616-a20b-dc3",
        "type": "line",
        "data": [ null,null,null,null,null,null,null, null, null, null,null,null],
        "point": {
            "events": {}
        }
    }
];
this.chartOptions = {
  title: {
    text: ''
  },
  legend: {
    enabled: true
  },
  credits: {
    enabled: false
  },
  tooltip: {
    pointFormat: '<b>{point.y:.3f}</b>'
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Score',
      style: {
        fontSize: '12px',
        fontFamily: 'Roboto',
        color: '#485465'
      }
    }
  },
  xAxis: {
    type: 'category',
    labels: {
      rotation: 0,
      style: {
        fontSize: '10px',
        fontFamily: 'Roboto',
        color: '#485465'
      },
    },
    categories: this.dateHeaderArray
  },
  series: this.seriesDataArray
};

can someone suggest on this , is that version issue or configuration and if it is version issue then what version will work proper for my case.

image url- https://i.stack.imgur.com/j6t23.jpg

CodePudding user response：

If the graph is working as expected for the first time and not working post update, try adding update flag as below.

<highcharts-chart[Highcharts]="Highcharts"[options]="chartOptions"[(update)]="updateFlag"></highcharts-chart>

And set the flag to true whenever you are updating the series data.

this.updateFlag = true;

CodePudding user response：

after some search I found the solution and the reason of getting wrong result.

how the update function work in highchart -

update(options [, redraw] [, oneToOne] [, animation])

an id option is used to map the new option set to an existing object. If an existing object of the same id is not found, the corresponding item (which is in same index) is updated. Here oneToOne play a good role. since if oneToOne is true then collections will be updated one to one, and items will be either added or removed to match the new updated options.

[oneToOne]="true" has solved the issue like below -

<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions" [oneToOne]="true" [(update)]="gotScorecardData">