Deep merge of the responsive props doesn't work

[rossm6]

These are the props I'm passing to the

  const badProps = {
    chartId: "result-x3ab9l2j",
    type: "line",
    height: 350,
    width: "100%",
    options: {
      chart: {
        id: "result-x3ab9l2j",
        height: 350,
        type: "line",
        events: {},
        toolbar: {
          show: true,
          tools: {
            download: false,
            selection: true,
            zoom: true,
            zoomin: true,
            zoomout: true,
            pan: false,
            reset: true
          },
          autoSelected: "zoom"
        },
        animations: {
          enabled: true,
          easing: "easeinout",
          speed: 800,
          animateGradually: {
            enabled: true,
            delay: 150
          },
          dynamicAnimation: {
            enabled: true,
            speed: 350
          }
        }
      },
      responsive: [
        {
          breakpoint: 670,
          options: {
            chart: {
              toolbar: {
                show: false
              }
            }
          }
        }
      ],
      legend: {
        show: false
      },
      dataLabels: {
        enabled: false
      },
      yaxis: {
        show: false,
        min: 0,
        max: 1,
        tickAmount: 5
      },
      xaxis: {
        type: "datetime",
        crosshairs: {
          show: true
        },
        tooltip: {
          enabled: false
        },
        min: 1682607535454,
        max: 1747863416046
      },
      grid: {
        borderColor: "#f1f1f1",
        show: true
      },
      tooltip: {
        shared: false
      },
      stroke: {
        width: [2],
        curve: ["straight", "smooth"],
        dashArray: [0, 8],
        colors: ["#4b2ed4", "#6a6a6a"]
      },
      markers: {
        size: 3,
        hover: {
          size: 4
        },
        colors: ["#fff"],
        strokeColor: ["#4b2ed4", "#6a6a6a"]
      },
      annotations: {
        points: [
          {
            x: 1745971200000,
            y: 0.15384615384615385,
            yAxisIndex: 0,
            marker: {
              size: 8,
              fillColor: "#fff",
              strokeWidth: 2,
              strokeColor: "#333",
              shape: "circle",
              offsetX: 0,
              offsetY: 0,
              cssClass: ""
            },
            label: {
              borderColor: "#c2c2c2",
              borderWidth: 1,
              borderRadius: 2,
              textAnchor: "middle",
              offsetX: 0,
              offsetY: 0,
              style: {
                background: "#fff",
                fontSize: "11px",
                fontWeight: 400,
                cssClass: "",
                padding: {
                  left: 5,
                  right: 5,
                  top: 2,
                  bottom: 2
                }
              }
            },
            customSVG: {
              offsetX: 0,
              offsetY: 0
            },
            image: {
              path: "data:image/png;base64,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",
              width: 20,
              height: 20,
              offsetX: 0,
              offsetY: 0
            }
          },
          {
            x: 1745971200000,
            y: 0.15384615384615385,
            yAxisIndex: 0,
            marker: {
              size: 8,
              fillColor: "#fff",
              strokeWidth: 2,
              strokeColor: "#333",
              shape: "circle",
              offsetX: 0,
              offsetY: 0,
              cssClass: ""
            },
            label: {
              borderColor: "#c2c2c2",
              borderWidth: 1,
              borderRadius: 2,
              textAnchor: "middle",
              offsetX: 0,
              offsetY: 0,
              style: {
                background: "#fff",
                fontSize: "11px",
                fontWeight: 400,
                cssClass: "",
                padding: {
                  left: 5,
                  right: 5,
                  top: 2,
                  bottom: 2
                }
              }
            },
            customSVG: {
              offsetX: 0,
              offsetY: 0
            },
            image: {
              path: "data:image/png;base64,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",
              width: 20,
              height: 20,
              offsetX: 0,
              offsetY: 0
            }
          }
        ],
        xaxis: []
      }
    },
    series: [
      {
        data: [
          [1745539200000, 0.15384615384615385],
          [1745971200000, 0.15384615384615385]
        ],
        stroke: {
          width: [2],
          colors: ["#4b2ed4"]
        }
      },
      {
        data: [
          [1684454400000, 1],
          [1685404800000, 0.3333333333333333],
          [1741392000000, 0.23076923076923078],
          [1744675200000, 0.15384615384615385],
          [1745971200000, 0.15384615384615385]
        ]
      }
    ]
  };

I'm using these props like this

return (
      <Chart
        id={badProps.chartId}
        type={badProps.type}
        height={badProps.height}
        width={badProps.width}
        options={badProps.options}
        series={badProps.series}
      />
):

It doesn't work. But if you comment out the responsive config it does. The error in the console about hasOwnProperty points to a flawed deep merge I think :)

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.