Changing the number entries in series causes rendering errors

[mlachance]

When implementing this as part of a Stencil project, the REST response sometimes will only deliver the response for one chart instead of two, or two chart lines where previously one was available. Instead of a full re-rendering, the chart will partially render. In the former case, the chart line is in the old color, in the latter the second chart does not appear and the horizontal axis labels also disappear.

A way to force a complete re-render on such cases would be welcome.

[mikaelkaron]

Could you provide some code that reproduces the error? (Even if a fix would be re-render it’s something we may want to look at)

[mlachance]

Here is the code in question:

export class BwebCropTileLai {
  @Prop() data: laiData;
  @State() series: ApexAxisChartSeries = [];

  @State() options: ApexOptions = {
    markers: {
      size: 6,
      strokeWidth: 0,
    },
    stroke: {
      width: 2,
      curve: 'straight',
    },
    tooltip: {
      enabled: false,
    },
    chart: {
      height: '350px',
      toolbar: { show: false },
      zoom: { enabled: false },
    },
    legend: {
      show: true,
      showForSingleSeries: true,
      position: 'top',
      horizontalAlign: 'right',
      fontFamily: fontFamily,
      fontSize: '14px',
      fontWeight: 700,
      labels: {
        useSeriesColors: true,
      },
    },
    xaxis: {
      categories: [],
      labels: {
        rotate: 0,
        showDuplicates: false,
        style: {
          fontFamily: fontFamily,
          fontSize: '14px',
        },
      },
      offsetX: 10,
      tickAmount: 3,
    },
    yaxis: {
      min: 0,
      max: 7,
      opposite: true,
      tickAmount: 7,
      labels: {
        align: 'right',
        style: {
          fontFamily: fontFamily,
          fontSize: '14px',
        },
      },
      tooltip: {
        enabled: false,
      },
    },
    responsive: [
      {
        breakpoint: 768,
        options: {
          legend: {
            position: 'bottom',
            horizontalAlign: 'left',
            fontFamily: fontFamily,
            fontSize: '14px',
            fontWeight: 700,
            labels: {
              useSeriesColors: true,
            },
          },
        },
      },
    ],
  };

  @Element() el: HTMLElement;

  @Watch('data')
  dataHandler(newData) {
    this.fillChartData(newData);
  }

  componentWillLoad() {
    if (this.data) {
      this.fillChartData(this.data);
    }
  }

  render() {
    return this.data ? (
      <Host>
        <header class="header-lai">Blattfläche (LAI)</header>
        <apex-chart type="line" series={this.series} options={this.options}/>
      </Host>
    ) : null;
  }

  private fillChartData(sourceData: laiData) {
    this.series = [];
    this.options.colors = [];
    if (sourceData.hist.length > 1) {
      this.series.push({
        name: labelHist,
        data: sourceData.hist,
      });
      this.options.colors.push(histColor);
    }
    if (sourceData.current) {
      this.series.push({
        name: labelCurrent,
        data: sourceData.current,
      });
      this.options.colors.push(currentColor);
    }
    if (sourceData.timestamp) {
      this.options.xaxis.categories = sourceData.timestamp;
    }
  }
}

[mlachance]

In short, this.series is updated to reflect the new chart data, and this.options.colors is also updated to only have the colors of the lines actually loaded. However, the colors do not change, though the chart series is updated.