CODEWITHSUNDEEP
cssreactjsuser-interfacehighchartsmaterial-ui
Arpan Nagar
Arpan Nagar

Reputation: 51

Styling HighCharts reset Zoom button with Material UI button

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?

Upvotes: 1

Views: 1361

Answers (1)

ppotaczek
ppotaczek

Reputation: 39119

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 () {};
  1. 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

Upvotes: 2

Related Questions