Warning: React does not recognize the timeScale, timeFormat prop on a DOM element

[ZahaanKhan]

Old Issue still not fixed: https://github.com/esnet/react-timeseries-charts/issues/257

Upgraded to "react-timeseries-charts": "0.15.4", but still getting same warnings when using EventMarker

[sartaj10]

@ZahaanKhan Could you give some more information regarding this? I don't see this warning in the Climate example anymore

[brandly]

i'm seeing this too! it seems to be related to my code here:

<ChartRow height={height} axisMargin={0} key={display}>
  <Charts>
    <g
      style={{
        transform: `translate(${height / 2}px, ${height / 2}px)`
      }}
    >
      <text fill="white">loading...</text>
    </g>
  </Charts>
</ChartRow>

on this page, Making your own chart says:

For your own chart, the render() method should return a SVG group at the top level, and then your chart rendering within that. In addition to any props you add to your chart, the following props are passed into each chart automatically: timeScale

the list of props doesn't include timeFormat! but changing my code to something like this got rid of both errors:

const LoadingRowContent = ({ height }) => (
  <g
    style={{
      transform: `translate(${height / 2}px, ${height / 2}px)`
    }}
  >
    <text fill="white">loading...</text>
  </g>
)

<ChartRow height={height} axisMargin={0} key={display}>
  <Charts>
    <LoadingRowContent height={height} />
  </Charts>
</ChartRow>

basically, the <g> was directly receiving those props, but now LoadingRowContent receives the props, ignores them, and renders a <g>

(also, if you have any advice about positioning svg elements in a better manner, i'm open to hearing them 😄 )