dc.js

How can you change the line thickness in a line chart in dc.js?

I would like to change the line thickness for the plotted line (not the axis), in a dc.js line chart. I guess this will be really basic, but cannot for the life of me find anything about it. Not a single example that I could find changes the default thickness of the plot line. Not a single question asks it. Color, sure. You want dotted lines? all kind of options. But if you want an extra thick line or a very thin one, nothing doing. Please shame me with the simplicity of it.

Solution

  • Any SVG attribute or attribute of dc.js which can be driven by data has a function which allows you to define the encoding from data to the attribute.

    But there are many attributes which are not driven by data. For these, you can use CSS styling, and it will apply to the whole chart.

    To be safe and not affect the wrong elements or other stuff on the page, you can constrain the selector:

    .dc-chart path.line {
    stroke-width: 3px;
}

    To select a specific child chart, specify the class _0, _1, … applied to its <g>:

    /* 3rd child of composite */
.dc-chart ._2 path.line {
    stroke-width: 3px;
}

    Reference: https://github.com/dc-js/dc.js/wiki/Chart-selectors