react-d3-components
react-d3-components copied to clipboard
How to customize strokeColor for LineChart?
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",
}```
You should set the colorscale similarly to the example in the readme.
var colorScale = d3.scale.category20();
<BarChart xScale={xScale}
yScale={yScale}
colorScale={colorScale}
...