Change EventMarker Label style

[mtrsklnkvMM]

trafficstars

Hello.

markerLabelStyle does not seem to work at all for when the type of the EventMarker is "flag". (it works ok when it's a point)

What I am trying to do is change the color of the label, but it stays grey.

My code:

<EventMarker
                type="flag"
                axis="axis"
                event={this.state.trackerEvent}
                column="level"
                info={[{ label: "Level", value: this.state.trackerValue }]}
                infoTimeFormat="%d-%b-%y @  %H:%M %p"
                infoWidth={120}
                markerRadius={2}
                markerLabelStyle={{ fill: "black"}} >> not working
                stemStyle={{ stroke:"black" }}
                markerStyle={{ fill: "black" }}
                infoStyle={{ fill: "white", stroke:"black" }}
/>

[gajus]

@sartaj10 This looks like an enhancement, rather than a question. I don't see such capability being documented. I wasn't able to check time color or label value given current configuration options.

[gajus]

Just in case, this is where it is hard-coded:

• https://github.com/esnet/react-timeseries-charts/blob/645d00563a0f00cca970b5a0c6ee8f3aa988112b/src/components/Label.js#L24 (time above box)
• https://github.com/esnet/react-timeseries-charts/blob/645d00563a0f00cca970b5a0c6ee8f3aa988112b/src/components/Label.js#L24 (body)

[wtesler]

I was just looking how to do this. Looks like it's not possible yet.

[vladyslav-dotsenko]

In case if someone needs a solution, you can pass a tag with infoTimeFormat property. Stylize it whatever you like.

e.g.

<BarChart
      style={style}
      series={series}
      columns={columns}
      info={this.state.infoValues}
      // --------- magic goes here
      infoTimeFormat={() => (<tspan style={{ fill: '#f00' }}>I AM RED</tspan>)}
/>)

Yet, that light-grey color is still hard-coded, you can inject SVG attributes all-over the places where formatting callbacks are supported.

[natejenkins]

You need to pass in infoStyle instead of markerInfoStyle and it should be of the following form:

<EventMarker
  type="flag"
  info={'this is my label'}
  infoWidth={100}
  infoStyle={{
    label: {
      fontWeight: 500,
      fontSize: 14,
      font: '"Goudy Bookletter 1911", sans-serif"',
      fill: 'white',
    },
    box: {
      fill: 'blue',
      stroke: 'red',
    },
  }}
  markerRadius={4}
  markerStyle={{fill: 'white'}}
/>

[UsmanHaider15]

I think documentation needs to be fixed to reflect infoStyle schema http://software.es.net/react-timeseries-charts/#/api/charts/EventMarker