造型 HighCharts 使用 Material UI 按钮重置缩放按钮

Question

I'm working on a project where we're using HighCharts and Material UI for UI components. Is there any way I can use the Material UI button component in place of the standard HighChart reset Zoom button?

Answer 1

This button has limited styling options, but you can replace it by a custom one in simple steps:

1. Overwrite method which is responsible for showing the default button.

---

Highcharts.Chart.prototype.showResetZoom = function () {};

---

2. Add and position a custom button with linked chart.zoomOut method called on click:

---

const App = () => {
  const chartComponent = useRef(null);
  const [isZoomed, setIsZoomed] = useState(false);
  const [options] = useState({
    chart: {
      zoomType: "x",
      events: {
        selection: function (e) {
          if (e.resetSelection) {
            setIsZoomed(false);
          } else {
            setIsZoomed(true);
          }
        }
      }
    },
    ...
  });

  const resetZoom = () => {
    if (chartComponent && chartComponent.current) {
      chartComponent.current.chart.zoomOut();
    }
  };

  return (
    <div style={{ position: "relative" }}>
      <HighchartsReact
        ref={chartComponent}
        highcharts={Highcharts}
        options={options}
      />
      {isZoomed && (
        <Button
          style={{ position: "absolute", top: 50, right: 10 }}
          onClick={resetZoom}
          color="primary"
        >
          Reset zoom
        </Button>
      )}
    </div>
  );
};

---

Live demo: https://codesandbox.io/s/highcharts-react-demo-forked-ssqk9?file=/demo.jsx

API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#zoomOut