codesuki / react-d3-components

D3 Components for React
http://codesuki.github.io/react-d3-components/example.html
MIT License
1.63k stars 206 forks source link

How to customize strokeColor for LineChart? #174

Open aalokt89 opened 4 years ago

aalokt89 commented 4 years ago

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",
}```
codesuki commented 4 years ago

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

var colorScale = d3.scale.category20();

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