dc.js Vue renders chart incorrect

Question

I try to use dc.js inside a Vue component. Why my linechart hast his filled black area and why does the brush look so different from the normal brush tool. I copied this from my plain Javascript project.

<template>
  <div>
    <div id="lineChart"></div>
  </div>
</template>

<script>
import crossfilter from "crossfilter2";
import * as d3 from "d3";
import * as dc from "dc";
const axios = require("axios").default;

export default {
  data() {
    return {
      signalData: null,
    };
  },

  mounted() {
    this.fetchData();
  },

  methods: {
    generateChart(data) {
      var linechart = new dc.LineChart("#lineChart");

      var dataModel = Object.keys(data).map(function (d) {
        return {
          key: +d,
          value: data[d],
        };
      });

      var cf = crossfilter(dataModel);

      var dimension = cf.dimension(dc.pluck("key"));
      var group = dimension.group().reduceSum(function (d) {
        return d.value;
      });

      linechart
        .width(null)
        .height(330)
        .x(d3.scaleLinear().domain([0, Object.keys(data).length]))
        .brushOn(true)
        .dimension(dimension)
        .group(group)
        .renderHorizontalGridLines(true)
        .renderVerticalGridLines(true)
        .elasticY(true)
        .renderArea(false);

      dc.renderAll();
    },

    fetchData() {
      axios
        .get("http://localhost:3000")
        .then((res) => {
          this.generateChart(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
</style>

How it looks:

How it should look:

Is this maybe kind of a version problem? How can i fix this?

npm will install the CSS to `node_modules/dc/dist/style/dc.css`. I don't know Vue all that well but here is a [Q&A about importing CSS in Vue 2](https://stackoverflow.com/questions/43784202/how-to-include-css-files-in-vue-2) — Gordon, Oct 31 '20 at 22:44

score 1 · Accepted Answer · answered Oct 31 '20 at 23:10

1

Answer was, as shown in comments, to include the dc.css file into the vue project.

Write this line of code into the main.js

require("../node_modules/dc/dist/style/dc.css")

answered Oct 31 '20 at 23:10

Felix Waigner

137
9

dc.js Vue renders chart incorrect

1 Answers1