esnet / react-timeseries-charts

Declarative and modular timeseries charting components for React
http://software.es.net/react-timeseries-charts
Other
866 stars 284 forks source link

No way to style legend #365

Open jtiscione opened 5 years ago

jtiscione commented 5 years ago

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.

brenkao commented 5 years ago

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
                    },
                }
            }
        }
jtiscione commented 5 years ago

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.