Skip to content

How to customize strokeColor for LineChart? #174

@aalokt89

Description

@aalokt89

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",
}```

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions