[Q] What needs to be changed config wise? (v3.20.0 to v3.20.1)

[entity]

Hi,

I'm trying to upgrade my ApexCharts version, it seems some of my charts no longer work in newer versions, is there anything config breaking I should be aware for?

[junedchhipa]

Oops! Can you post the error which occurred due to the update?
There is no major breaking change, but I need to see a demo of what you're trying to do.

[entity]

Oops! Can you post the error which occurred due to the update?
There is no major breaking change, but I need to see a demo of what you're trying to do.

Hey there,

Some charts function, some don't.

Uncaught (in promise) TypeError: can't access property "length", a.globals.series[a.globals.maxValsInArrayIndex] is undefined
    value https://cdn.jsdelivr.net/npm/apexcharts:6
    value https://cdn.jsdelivr.net/npm/apexcharts:6
    value https://cdn.jsdelivr.net/npm/apexcharts:6
    value https://cdn.jsdelivr.net/npm/apexcharts:14
    value https://cdn.jsdelivr.net/npm/apexcharts:6
    value https://cdn.jsdelivr.net/npm/apexcharts:14
    value https://cdn.jsdelivr.net/npm/apexcharts:14

Hope it helps!

[entity]

Leading on, once I set a default

series: [{ data: [] }]

I ended up with no errors in console, but a few of my charts aren't functioning at all.

let settledVsIncurredChart
function initSettledVsIncurredChart() {
  const settledVsIncurredChartOptions = {
    chart: {
      height: 380,
      type: 'line',
      stacked: false,
    },
    plotOptions: {
      line: {
        style: {
          fontSize: '12px',
          fontWeight: 'bold',
        },
        background: {
          enabled: true,
          foreColor: '#fff',
        },
      },
      bar: {
        dataLabels: {
          position: 'bottom',
          offset: -10,
          style: {
            colors: ['#FFF'],
          },
          background: {
            enabled: true,
            foreColor: '#fff',
          },
        },
      },
    },
    dataLabels: {
      enabled: true,
      enabledOnSeries: [2],
      offsetY: -5,
      style: {
        fontSize: '12px',
        fontWeight: 'bold',
        colors: ['#FFF'],
      },
      background: {
        enabled: true,
        foreColor: '#fff',
      },
      formatter: (val, index) => `${val.toFixed(2)}%`,
    },
    stroke: {
      width: [0, 0, 3],
    },
    series: [
      {
        name: 'Total Paid',
        type: 'column',
        data: [],
      },
      {
        name: 'Total Incurred',
        type: 'column',
        data: [],
      },
      {
        name: '% Difference',
        type: 'line',
        data: [],
      },
    ],
    colors: ['#002060', '#ffc000', '#ed7d31'],
    xaxis: {
      categories: [],
      axisBorder: {
        show: true,
        color: '#bec7e0',
      },
      axisTicks: {
        show: true,
        color: '#bec7e0',
      },
    },
    yaxis: [
      {
        seriesName: 'Total Paid',
        show: false,
        axisTicks: {
          show: false,
        },
        axisBorder: {
          show: false,
          color: '#20016c',
        },
        labels: {
          formatter: val => `£${numeral(val).format('0a')}`,
          style: {
            color: '#20016c',
          },
        },
        title: {
          text: 'Total Paid',
        },
      },
      {
        seriesName: 'Total Paid',
        axisTicks: {
          show: false,
        },
        axisBorder: {
          show: false,
          color: '#77d0ba',
        },
        labels: {
          formatter: val => `£${numeral(val).format('0a')}`,
          style: {
            color: '#77d0ba',
          },
          offsetX: 10,
        },
        title: {
          text: 'Total Incurred',
        },
      },
      {
        reversed: true,
        opposite: true,
        axisTicks: {
          show: false,
        },
        axisBorder: {
          show: false,
          color: '#fa5c7c',
        },
        labels: {
          formatter(value) {
            return `${value.toFixed(2)}%`
          },
          style: {
            color: '#fa5c7c',
          },
        },
        title: {
          text: '% Difference',
        },
      },
    ],
    tooltip: {
      followCursor: true,
      shared: true,
    },
    grid: {
      borderColor: '#f1f3fa',
    },
    legend: {
      position: 'top',
      offsetY: 6,
    },
    responsive: [
      {
        breakpoint: 600,
        options: {
          yaxis: {
            show: false,
          },
          legend: {
            show: false,
          },
        },
      },
    ],
  }

  settledVsIncurredChart = new ApexCharts(document.querySelector('#svichart'), settledVsIncurredChartOptions)
  settledVsIncurredChart.render()
}

I update this chart at a later period (API call) with its series data alongside its categories.

Anything i'm doing wrong?

[junedchhipa]

Based on this error message TypeError: can't access property "length", a.globals.series[a.globals.maxValsInArrayIndex] I have added a check.
Hopefully, that will fix the issue you're facing in the next release.