[Solved]-Gauge Series of Highcharts with React not the Solid Gauge but Gauge Series-Highcharts

your plotoptions should be part of chart options in

  <highchartschart
    chart=

i suggest changing the name of the variable, so it will not be misleading - e.g. to chartoptions.

second, and the most important problem is caused by a typo - series type is gauge and not guage the:

      <series id="series" name="value" data={[80]} type="guage" />

based on the code:

import react, { component } from "react";
import highcharts from "highcharts";
require("highcharts/highcharts-more")(highcharts);
require("highcharts/modules/exporting")(highcharts);

import {
  highchartschart,
  withhighcharts,
  series,
  xaxis,
  yaxis,
  tooltip
} from "react-jsx-highcharts";

const plotoptions = {
  plotbackgroundcolor: null,
  plotbackgroundimage: null,
  plotborderwidth: 0,
  plotshadow: false
};

const paneoptions = {
  startangle: -120,
  endangle: 120,
  background: [
    {
      backgroundcolor: {
        lineargradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
        stops: [[0, "#fff"], [1, "#333"]]
      },
      borderwidth: 0,
      outerradius: "109%"
    },
    {
      backgroundcolor: {
        lineargradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
        stops: [[0, "#333"], [1, "#fff"]]
      },
      borderwidth: 1,
      outerradius: "107%"
    },
    {
      backgroundcolor: "#ddd",
      borderwidth: 0,
      outerradius: "105%",
      innerradius: "103%"
    }
  ]
};

const graphrender = ({ data }) => {
  return (
    <div classname="gauge-empty">
      <div classname="no-data">data unavaialble</div>
      <highchartschart
        chart={{ type: "gauge" }}
        plotoptions={plotoptions}
        pane={paneoptions}
      >
        <tooltip padding={10} hidedelay={250} shape="square" />

        <xaxis />

        <yaxis
          id="myaxis"
          min={0}
          max={100}
          minortickinterval="auto"
          minortickwidth={1}
          minorticklength={10}
          minortickposition="inside"
          minortickcolor="#666"
          tickpixelinterval={30}
          tickwidth={2}
          tickposition="inside"
          ticklength={10}
          tickcolor="#666"
          labels={{
            step: 2,
            rotation: "auto"
          }}
          title={{
            text: ""
          }}
          plotbands={[
            {
              from: 0,
              to: 60,
              color: "#55bf3b" // green
            },
            {
              from: 60,
              to: 80,
              color: "#dddf0d" // yellow
            },
            {
              from: 80,
              to: 100,
              color: "#df5353" // red
            }
          ]}
        >
          <series id="series" name="value" data={[80]} type="guage" />
        </yaxis>
      </highchartschart>
    </div>
  );
};

const gauge = ({ data }) => <graphrender data={data} />;

export default withhighcharts(gauge, highcharts);

(i have not resolved the problem with the chart option - you can move the options into the correct place if you want them to work. i'm not sure if you want them or if those were set only for the demo purpose)