const data = [
    { "color": "rgb(0, 0, 255)", "description": "XXO1", "field": "A", "label": "XXYY00000074800.15", "x": 1, "y": 1 },
    { "color": "rgb(255, 0, 0)", "description": "XXO1", "field": "B", "label": "XXYY00000074800.15", "x": 2, "y": 1 },
    { "color": "rgb(0, 0, 255)", "description": "XXO1", "field": "C", "label": "XXYY00000074800.15", "x": 3, "y": 1 },
    { "color": "rgb(0, 0, 255)", "description": "XXO1", "field": "D", "label": "XXYY00000074800.15", "x": 4, "y": 1 },
    { "color": "rgb(0, 0, 255)", "description": "YYO1", "field": "A", "label": "XXYY00000049239.12", "x": 1, "y": 2 },
    { "color": "rgb(255, 0, 0)", "description": "YYO1", "field": "B", "label": "XXYY00000049239.12", "x": 2, "y": 2 },
    ......
  ]
<HeatmapSeries colorType="literal" data={data} style={strokeWidth} />

react_devtools_backend_compact.js:2367 
Warning: Received NaN for the `x` attribute. If this is expected, cast the value to a string.
    in rect (created by HeatmapSeries)
    in g (created by HeatmapSeries)
    in HeatmapSeries (created by XYPlot)
    in svg (created by XYPlot)
    in div (created by XYPlot)
    in XYPlot (created by HeatMap)
    in div (created by HeatMap)
    in HeatMap (created by Volcano)
    in div (created by Volcano)
    in div (created by Volcano)
    in Volcano (created by DifferentialExpression)
    in div (created by DifferentialExpression)
    in div (created by DifferentialExpression)
    in div (created by DifferentialExpression)
    in div (created by DifferentialExpression)
    in DifferentialExpression (created by AnalysisRoute)
    in div (created by Context.Consumer)
    in TabPane (created by AnalysisRoute)
    in div (created by TabContent)
    in TabContent (created by Tabs)
    in div (created by Tabs)
    in Tabs (created by Context.Consumer)
    in Tabs (created by AnalysisRoute)
    in div (created by AnalysisRoute)
    in AnalysisRoute
    in Unknown (created by Routing)
    in RenderedRoute (created by Routes)
    in Routes (created by Routing)
    in div (created by Routing)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by Routing)
    in Routing

react_devtools_backend_compact.js:2367
Warning: Received NaN for the `max` attribute. If this is expected, cast the value to a string.
    in input (created by InputNumber)
    in div (created by InputNumber)
    in div (created by InputNumber)
    in InputNumber (created by Context.Consumer)
    in InputNumberPlus (created by Volcano)
    in div (created by Volcano)
    in div (created by Volcano)
    in div (created by Volcano)
    in Volcano (created by DifferentialExpression)
    in div (created by DifferentialExpression)
    in div (created by DifferentialExpression)
    in div (created by DifferentialExpression)
    in div (created by DifferentialExpression)
    in DifferentialExpression (created by AnalysisRoute)
    in div (created by Context.Consumer)
    in TabPane (created by AnalysisRoute)
    in div (created by TabContent)
    in TabContent (created by Tabs)
    in div (created by Tabs)
    in Tabs (created by Context.Consumer)
    in Tabs (created by AnalysisRoute)
    in div (created by AnalysisRoute)
    in AnalysisRoute
    in Unknown (created by Routing)
    in RenderedRoute (created by Routes)
    in Routes (created by Routing)
    in div (created by Routing)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by Routing)
    in Routing

Error: <rect> attribute x: Expected length, "NaN".                             react-dom.development.js:1297