How to make filter transparent in dc.js charts

Question

I am trying to make a bar chart using dc.js. Users are able to select a portion of the data by clicking and dragging on a filter. However, the difficulty is that when this happens, on my website, the filter is completely black and the data selected is obscured: Black filter

What should happen is, the filter should be partially transparent, as in this example from the home page of dc.js, so that the selected data can still be seen.

Here is the sample code which I am using to generate my page. I am using Crossfilter version 1.3.14, d3.js version 3.5.17 and dc.js 2.1.9.

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="static/dc.css.min"/>
</head>
<body>
    <div id="graph"></div>
    <script type="text/javascript" src="static/d3.js"></script>
    <script type="text/javascript" src="static/crossfilter.js"></script>
    <script type="text/javascript" src="static/dc.min.js"></script>
    <script type="text/javascript">
    var data = "data/page.csv";
    d3.csv(data, function(error, records) {
        var ndx = crossfilter(records);
        var keyDimension = ndx.dimension(function(d) {return d.key;});
        var valueGroup = keyDimension.group().reduceCount();

        var graph = dc.barChart("#graph");
        graph.width(500)
             .height(300)
             .x(d3.scale.linear().domain([0,15]))
             .xUnits(function(){return 50;})
             .dimension(keyDimension)
             .group(valueGroup);
        graph.render();
    });
    </script>
</body>

correcthrsbatterystpl correcthrsbatterystpl · Accepted Answer · 2017-12-12T06:15:12

I replaced the minified dc files (dc.min.css, dc.min.js, dc.min.js.map) with their full equivalents (dc.css, dc.js, dc.js.map) downloaded from Github, and now the filter displays as normal.

How to make filter transparent in dc.js charts

1 Answers