Line chart color with D3 wrapper

Question

I am using react-d3-components wrapper for D3 in React which can be found here.

I want to override the default path color scale and make the lines in the graph all red for example.

The documentation provides the example below but does not mention how to control the line color.

How can I pass the color as a prop for example for a single path line chart?

I tried to set an attribute color in the stroke property but nothing happens.

.line {
    stroke: #000;
}

I can fix the line color with css but I'd rather have it as a LineChart parameter.

  var dashFunc = function(label) {
            if (label == "somethingA") {
                return "4 4 4";
            }
            if (label == "somethingB") {
                return "3 4 3";
            }
        }

        var widthFunc = function(label) {
            if (label == "somethingA") {
                return "4";
            }
            if (label == "somethingB") {
                return "2";
            }
        }

        var linecapFunc = function(label) {
            if (label == "somethingA") {
                return "round";
            }
        }

        React.render(<LineChart
                        data={data}
                        width={400}
                        height={400}
                        margin={{top: 10, bottom: 50, left: 50, right: 10}}
                        tooltipHtml={tooltipLine}
                        xAxis={{innerTickSize: 6, label: "x-label"}}
                        yAxis={{label: "y-label"}}
                        shapeColor={"red"}
                        stroke={{strokeDasharray: dashFunc, strokeWidth: widthFunc, strokeLinecap: linecapFunc}}
                        />,
        document.getElementById('linechart')
        );

Nitin Sharma Nitin Sharma · Accepted Answer · 2018-10-04T12:35:44

Pass a colorStroke props to linchart. colorStroke props take a function which will pass a label as a parameter. According to parameter you can return your color.

Line chart color with D3 wrapper

1 Answers