How to use this timelines-chart in vue js app

[rpankaj]

I try to use timelines-chart in my Vue js app and I got errors:

[vasturiano]

@rpankaj thanks for reaching out. I'm afraid I'm not familiar enough with vue to help you troubleshoot this case. Can you reproduce the same error outside of the vue framework?

[costichiulan]

@rpankaj here is a sample, i was able to use the library with vuejs without any issues

import TimelinesChart from 'timelines-chart';
import * as d3 from "d3";
import {EventBus} from "../main";
export default {
    data() {
        return {
            listener: null
        }
    },
    name: "timelinechart",
    mounted() {
        let data = this.$store.state.analizedVideos.analyzedVideoBehaviour;
            let chartData = this.getRandomData(data, true);
            const chart = TimelinesChart();
            chart.data(chartData)
                .timeFormat("%M:%S:%L")
                .maxHeight(250)
                .width(document.getElementById('timeline-chart-id').offsetWidth)
                .maxLineHeight(30)
                .onSegmentClick(this.onSegmentClick)
                .zQualitative(true);

            chart(document.getElementById('myPlot'));
 }

}

[nicolas-bonnel]

Except a console message (timelines-chart.module.js?6620:123 Uncaught TypeError: Cannot read property 'domain' of null), this works well for me (tested with vue / nuxt).

Don't try to render the chart before your component is mounted. You can use refs to get dom element.

<template lang="html">
  <div ref="chart" />
</template>

<script>
import TimelinesChart from 'timelines-chart'
const chart = TimelinesChart()

export default {
  data: () => ({
    chart: null
  }),
  async mounted() {
    // Insert your code here to populate data
    this.renderChart(data)
  },
  methods: {
    renderChart(data) {
      if (!this.$refs.chart) return
      try {
        if (!this.chart) {
          this.chart = chart(this.$refs.chart).data(data)
        } else {
          this.chart.data(data).refresh()
        }
      } catch (err) {}
    }
  }
}
</script>