react-d3-components icon indicating copy to clipboard operation
react-d3-components copied to clipboard

How to customize strokeColor for LineChart?

Open aalokt89 opened this issue 6 years ago • 1 comments

I'm trying to figure out how to change the strokeColor of a LineChart. Ideally, I don't want to use external css (I'm trying to use this in FramerX). This is what I have so far:

        <Frame height={height} width={width} position="relative">
            <div style={chartContainerStyle}>
                <d3.LineChart
                    
                    data={data}
                    width={width}
                    height={height}
                    margin={{ top: 16, bottom: 32, left: 32, right: 16 }}
                    xAxis={{
                        tickPadding: 8,
                        innerTickSize: 0,
                        label: props.xLabel,
                    }}
                    yAxis={{
                        tickPadding: 8,
                        innerTickSize: 0,
                        label: props.yLabel,
                    }}
                    stroke={{
                        strokeWidth,
                        strokeColor: strokeColor,
                        strokeLinecap: "round",
                    }}
                   
                />
            </div>
        </Frame>
    )
}

LineChart.defaultProps = {
    height: 400,
    width: 400,
    strokeWidth: 2,
    strokeColor: "#000",
}```

aalokt89 avatar Oct 21 '19 19:10 aalokt89

You should set the colorscale similarly to the example in the readme.

var colorScale = d3.scale.category20();

<BarChart xScale={xScale}
      yScale={yScale}
      colorScale={colorScale}
...

codesuki avatar Oct 29 '19 01:10 codesuki