Apexcharts xaxis formatting fails when using datetime type

Question

I use vue-apexcharts to plot charts in a dashboard. I created a generic file that contains the base options for all charts (to uniformize styling and code reusability) and I extend/override this object with a mergeDeep() function when necessary. xaxis type is defined as 'category' as default, and this value changed later if needed for 'datetime' charts.

When overriding xaxis.type to 'datetime', the chart fails and shows the unix epoch value instead of the formated string date. This is not happening if chart is standalone or if I delete de xaxis.labels object from the base options file.

I'm using last apexchart (3.8.0) and vue-apexcharts (1.3.6) versions.

Dates are created correctly with new Date().

Things I tried:

1. Standalone chart. Works but I may need to combine charts

2. Delete xaxis.labels object in apexchartGenericOptions.js object. Works but then axis is not styled.

3. Deep clone all separate options objects with JSON.parse(JSON.stringify(options)). mergeDeep() function creates a complete new object with Array.reduce so it shouldn't be a problem of mutation. Doesn't work.

4. Reset a couple of attributes thate are created I don't know where convertedCatToNumeric: true, and categories: []. Doesn't work

I created a codesandbox example

The xaxis configuration in apexchartGenericOptions.js

export default {
  (...)
  xaxis: {
    type: 'category',
    labels: {
      show: true,
      style: { colors: '#bcc6d3', fontSize: '10px', fontFamily: 'Nunito Sans, sans-serif' },
    },
    axisBorder: { show: false },
    axisTicks: { show: false },
    tooltip: { enabled: false },
  },
  (...)
},

New options object for different charts in apexOptions.js

import mergeDeep from '../mergeDeep';
import apexchartGenericOptions from './apexchartGenericOptions';
import apexchartPieOptions from './apexchartPieOptions';

export default {
  columns: mergeDeep(apexchartGenericOptions, { xaxis: { type: 'datetime' } }),
  lines: mergeDeep(apexchartGenericOptions, { ... }),
  pie: mergeDeep(apexchartGenericOptions, apexchartPieOptions), 
};

In my vue component I store it to data or is returned in computed

<template lang="html">
  <div class="content">
    <apex-chart
      type="line"
      :options="apexOptions.lines"
      :series="categorySeries"
      height="300" />
    <apex-chart
      type="bar"
      :options="apexOptions.columns"
      :series="datetimeSeries"
      height="300" />
  </div>
</template>

import ApexChart from 'vue-apexcharts';
import apexOptions from '@/utils/charts/apexOptions';

export default {
  name: 'my-component',
  data() {
    return { apexOptions };
  },
  (...)
};

I expect the xaxis to be plotted as category in the lines chart and as formatted string datetime in columns chart, but it is plotted as numeric unix epoch. Only plotted correctly if I delete the xaxis.labels object in apexchartGenericOptions.js or if I plot only one chart.

Answer 1

If you still interested in this, i might found a solution after reading the codebase.

Just set the tickPlacement: 'between' for xaxis like this:

export default {
  (...)
  xaxis: {
    type: 'category',
    labels: {
      show: true,
      style: { colors: '#bcc6d3', fontSize: '10px', fontFamily: 'Nunito Sans, sans-serif' },
    },
    axisBorder: { show: false },
    axisTicks: { show: false },
    tooltip: { enabled: false },
    tickPlacement: 'between'
  },
  (...)
}

As i read in the documentation this option doesn't make any noticeable change in the results but how it's useful for us is prevent this condition to be true so it will never convert categories to numbers. easy peasy :)))

https://github.com/apexcharts/apexcharts.js/blob/c18e848c6e29c10ee45d43a1731d8b3190fda5d4/src/modules/settings/Config.js#L107