Search code examples
apexcharts

ApexCharts: series does not lineup


For some reason data points do not align with months they're in

var options = {
  series: [{
    name: "Orders",
    data: ['3661','3058','4080','4234','5791','4872','4912','4864','3932','1045']
}, {
    name: "Returns",
    data: ['102','119']
}],

These categories are coming from order months:

    xaxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct'],
    },

The graph shows (in yellow) returns in Jan/Feb, but in reality they are in Sep/Oct.

What am I missing/doing wrong?

enter image description here


Solution

  • The sequence/position of the data values is important in plotting the graph.

    Your current data values for "Returns" in the graph options represent the value for Jan and Feb. You should put these values in the array's 8th and 9th (index) and provide the remaining values with '0'.

    {
      name: "Returns",
      data: ['0', '0', '0', '0', '0', '0', '0', '0', '102','119']
    }
    
    var originalReturnsData = ['102', '119'];
    var returnsData = new Array(10).fill('0');
    returnsData[8] = originalReturnsData[0];
    returnsData[9] = originalReturnsData[1];
    
    var options = {
      series: [
        {
          name: 'Orders',
          data: [
            '3661',
            '3058',
            '4080',
            '4234',
            '5791',
            '4872',
            '4912',
            '4864',
            '3932',
            '1045',
          ],
        },
        {
          name: 'Returns',
          data: returnsData,
        },
      ],
    };
    

    Demo @ StackBlitz

    enter image description here