Apexcharts xaxis formatting fails when using datetime type

48
June 20, 2019, at 05:00 AM

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

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.

READ ALSO
Configure webpack to generate separate vendor js files for each entry

Configure webpack to generate separate vendor js files for each entry

I have multiple js apps in one applicationEach js app has different dependency on js libraries and each js app is an entry for webpack

71
How to open console automatically when any page loads,without pressing F12 or inspect

How to open console automatically when any page loads,without pressing F12 or inspect

I trying to open console automatically when any web page loads without using F12 and inspect methodsMeans when we hit any URL console gets open automatically along with loading of page

28
Awesomplete: How to add thumbnail with datalist option [on hold]

Awesomplete: How to add thumbnail with datalist option [on hold]

I'm using awesomplete for auto-suggestionsThe URL of the library is https://github

66
How to authenticate users to multiple channels

How to authenticate users to multiple channels

I am building a php/javascript application which allows each individual user to connect to their private channel, eg

30