I am currently facing an issue with using dc.js inside a Vue component. My linechart has this filled black area and the brush tool looks different from the normal brush tool. I took this code 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>
Current Appearance: https://i.sstatic.net/SReeI.png
Desired Appearance: https://i.sstatic.net/5AIJX.png
Could this be due to a version compatibility issue? How can I go about fixing this problem?