labelStyle for Legend not applied

[daviddionys]

Dear,

I inserted a legend for my chart and applied labelStyle both on a general level, as well as on the level of categories, but the text color did not change.

<Legend type="line" align="right" stack={true} style={legendStyle} labelStyle={{color:'rgb(255,255,255)'}} categories={[ { key: "solar", label: "solar generated energy", symbolType: "dot", labelStyle:{color:"#fff!important",backgroundColor: "#aec7e8"} }, { key: "wind", label: "wind generated energy", symbolType: "dot" }, ]}

[sartaj10]

Did you use the styler function for this? Can you preview some of the code? You can take a look at some of the examples to get an idea as to how to use it.

[daviddionys]

My legend looks like this

<Legend
            type="line"
            align="right"
            stack={true}
            style={legendStyle}
            labelStyle={{color:'rgb(255,255,255)'}}
            categories={[
              { key: "solarForecast", label: "door zonnepanelen voorspeld", symbolType: "dot", labelStyle:{color:"#fff!important",backgroundColor: "#aec7e8"} },
              { key: "windForecast", label: "door onshore windturbines voorspeld", symbolType: "dot" },
            ]}
          />

I use a styler in general for the legend colors:

const legendStyle = styler([
      { key: "solar", color: "#fce0d4" },
      { key: "wind", color: "#1eb0e6" },
      { key: "solarForecast", color: "#f9e9e3" },
      { key: "windForecast", color: "#82cbe5" },
    ]);

Just to get the colors.

[sartaj10]

So you want to apply a styling towards the Labels in the legend? Is that what you're trying to achieve? I'll try to make a small example to show this

[daviddionys]

yes, that is right. I am putting the legend inside a react-tooltip, which has a dark background, and while the color dots come out fine, I would just like to set the font color to white within the legend - but they stay grey and are barely. Thank you very much for following up on this.

[daviddionys]

I just checked the issue list and found this one. https://github.com/esnet/react-timeseries-charts/issues/112. However, although I went through the Legend.js code and added color styling both to at the level of the legend and at the level of the categories, it did not work out. An example would be useful where it is in use, because the styling might be overwritten at some point. Thak you for your time in any case.

[natejenkins]

Here is an example:

/* data is an array of timeSeries */
/* colors is an object of the form {t1Name: color1, t2Name: color2...} */
renderLegend = (data, colors) => {
    const categories = data.map(timeSeries => {
      let name = timeSeries.name()
      return {
        key: name,
        label: name,
        disabled: false,
      }
    })

    /************** Here you can change the text color. *********************/
    const labelStyle = {
      normal: {fontSize: 'normal', color: 'blue', cursor: 'pointer'},
      highlighted: {fontSize: 'normal', color: 'red', cursor: 'pointer'},
      selected: {fontSize: 'normal', color: 'green', cursor: 'pointer'},
      muted: {fontSize: 'normal', color: 'orange', opacity: 0.4, cursor: 'pointer'},
    }
    const valueStyle = {
      normal: {fontSize: 'normal', color: '#333', cursor: 'pointer'},
      highlighted: {fontSize: 'normal', color: '#222', cursor: 'pointer'},
      selected: {fontSize: 'normal', color: '#333', cursor: 'pointer'},
      muted: {fontSize: 'normal', color: '#333', opacity: 0.4, cursor: 'pointer'}
    }

    const legendStyle = {}
    /* this calculation repeats what the styler function does for symbol and uses the above styles
    ** for label and value.  The problem with using the built-in styler is that it uses constants for
    ** both label and value styles.
    */
    data.map(timeSeries => {
      let name = timeSeries.name()
      let c = colors[name]
      legendStyle[name] = {
        symbol: {
          normal: {
            stroke: c,
            fill: c,
            opacity: 0.7,
            strokeWidth: 10,
            cursor: 'pointer',
          },
          highlighted: {
            stroke: c,
            fill: c,
            opacity: 0.8,
            strokeWidth: 10,
            cursor: 'pointer',
          },
          selected: {
            stroke: c,
            fill: c,
            opacity: 0.8,
            strokeWidth: 10,
            cursor: 'pointer',
          },
          muted: {
            stroke: c,
            fill: c,
            opacity: 0.2,
            strokeWidth: 10,
            cursor: 'pointer',
          },
        },
        label: labelStyle,
        value: valueStyle,
      }
    })

    return (
      <Legend
        type="line"
        style={legendStyle}
        categories={categories}
      />
    )
}