Shadow creating between lines in seriesChart

[lsossai]

My series chart is creating this shadow that I couldnt find in the documentation, what could be happening?

var data = [{ appliance: "Geral Light", occurred_at: "2021/03/24 17:55:00", measured_value: 100 },
{ appliance: "Geral Light", occurred_at: "2021/03/24 17:55:15", measured_value: 90 },
{ appliance: "Geral Light", occurred_at: "2021/03/24 17:55:30", measured_value: 120 },
{ appliance: "Geral Light", occurred_at: "2021/03/24 17:55:45", measured_value: 130 },
{ appliance: "Injetado Light", occurred_at: "2021/03/24 17:55:00", measured_value: 90 },
{ appliance: "Injetado Light", occurred_at: "2021/03/24 17:55:15", measured_value: 120 },
{ appliance: "Injetado Light", occurred_at: "2021/03/24 17:55:30", measured_value: 110 },
{ appliance: "Injetado Light", occurred_at: "2021/03/24 17:55:45", measured_value: 140 }];

const dateFormatSpecifier = '%Y/%m/%d %H:%M:%S';
const dateFormatParser = d3.timeParse(dateFormatSpecifier);
data.forEach(function (d) {
    d.occurred_at = dateFormatParser(d.occurred_at);
    d.measured_value = +d.measured_value;
    d.appliance = d.appliance;
});

var ndx = crossfilter(data);
var all = ndx.groupAll();
var applianceDim = ndx.dimension(function (d) { return d["appliance"]; });
var applianceGroup = applianceDim.group();

var occurredDim = ndx.dimension(function (d) { return [d["appliance"], d["occurred_at"]]; });
var measureGroup = occurredDim.group().reduceSum(function (d) { return d.measured_value })

var seriesChart = dc.seriesChart("#lineChart");
console.log(data)
seriesChart.width(600)
    .height(400)
    .margins({ top: 36, right: 36, bottom: 36, left: 36 })
    .chart(function (c) { return new dc.LineChart(c).curve(d3.curveCardinal); })
    .x(d3.scaleTime().domain(d3.extent(data, function (d) { return d.occurred_at; })))
    .brushOn(true)
    .transitionDuration(500)
    .yAxisLabel("Potência (W)")
    .xAxisLabel("Tempo")
    .elasticY(true)
    .elasticX(true)
    .dimension(occurredDim)
    .group(measureGroup)
    .seriesAccessor(function (d) { return d.key[0]; })
    .keyAccessor(function (d) { return +d.key[1]; })
    .valueAccessor(function (d) { return +d.value; })
    .legend(dc.legend().x(460).y(0).itemHeight(13).gap(5).horizontal(0).legendWidth(140).itemWidth(70));
dc.renderAll();

function load_button(appliance) {
    return function load_it() {
        applianceDim.filter(appliance)
        dc.redrawAll();
    };
}

var button1 = load_button("Geral Light"),
    button2 = load_button("Injetado Light");

[gordonwoodhull]

Please make sure that you are using dc.css or that you otherwise make sure that the fill is none on your lines.

I think this is the relevant line:

https://github.com/dc-js/dc.js/blob/699f8dc0579328a6f7d15c9dda062d9953c50806/style/dc.scss#L110

[lsossai]

Thanks, download this css didnt work

This post helped me, adding

to the HTML Thank you for the response!