react-timeseries-charts icon indicating copy to clipboard operation
react-timeseries-charts copied to clipboard

No way to style legend

Open jtiscione opened this issue 6 years ago • 2 comments

The "styler" object in this library actually hard-codes the colors of legend labels to 333 and values to 999 and prevents you from changing them. This basically prevents you from using a legend on a chart with a dark background.

There's no reason why the colors of legend labels and values shouldn't be configurable. There aren't any other hard-coded colors being set in styler.js, just these two.

jtiscione avatar Feb 04 '19 20:02 jtiscione

Instead of using the styler object I just passed in a style object like this to Legend.

        style={
            columnName: {
                symbol: {
                    normal: {
                        stroke: "red",
                        opacity: 0.8,
                    },
                    highlighted: {
                        stroke: "red",
                        opacity: 1.0
                    },
                    selected: {
                        stroke: "red",
                        opacity: 1.0
                    },
                    muted: {
                        stroke: "red",
                        opacity: 0.4
                    }      
                },
                label: {
                    normal: {
                        color: "#fff"
                    },
                    muted: {
                        color: "#fff",
                        opacity: 0.4
                    },
                },
                value: {
                    normal: {
                        color: "#fff"
                    },
                    muted: {
                        color: "#fff",
                        opacity: 0.4
                    },
                }
            }
        }

brenkao avatar Feb 06 '19 20:02 brenkao

Yep- I dug through the source last night and figured out how to hit it with a style this way. (The documentation just says you can pass "an object".) Styler is convenient especially if you're first starting out; It might be nice to extend it to support the full range of options that you can set with the object.

jtiscione avatar Feb 07 '19 17:02 jtiscione