score:0
Accepted answer
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)
Source: stackoverflow.com
Related Query
- Gauge Series of Highcharts with React not the Solid Gauge but Gauge Series
- Starting a php session from react with an axios call does not keep the session alive, but doing it with postman works just fine
- React router 4 - Why is my component only rendered on manually setting the url but not on clicking a Link with same url?
- ReactJS - "setState" with react Hooks, does not merge the state but rather replaces it
- I want to call a function inside a const with React, but React is not correctly show the function
- Trying to add an array of objects using react useState but getting the error 'Objects are not valid as a React child (found: object with keys {})'
- i`m getting the 400 response error in react.js i know the backendd is ok but the client side i am not sure i am not fimiliar with react
- React updates the state but not the component with Redux
- I have a chart but it is not updating the chart with react chart-js-2
- I am having an issue with react router as my url is getting updated on clicking on it but the page is not getting rendered
- When a React button is clicked the url/route changes. But the content associated with the url/route does not render
- Getting an error "A non-serializable value was detected in the state" when using redux toolkit - but NOT with normal redux
- Why is `Promise.then` called twice in a React component but not the console.log?
- React useEffect Hook when only one of the effect's deps changes, but not the others
- React Intl FormattedNumber with the currency symbol before, not after
- React Native Navigation Error: The action navigate with payload {"name": 192.168.100.189:19000", "params":{}} was not handled by any navigator
- Trying to deploy my React app with gh-pages but got this error message : The "file" argument must be of type string. Received type undefined
- Getting the error "Nested CSS was detected, but CSS nesting has not been configured correctly" in React app?
- React hooks - useState() is not re-rendering the UI with the new state updates
- React warns about passed prop with value null, where the PropType for the prop is not required
- Ajax is not setting the headers - React with TS
- Recharts is not working for the React with typescript
- React - New Context API not working with Class.contextType, but works with Context.Consumer
- Dockerizing a React App: The app starts inside the container, but it not accessible from the exposed port
- React app showing page with "404 the requested path could not be found" when using Apache
- Redux: where to place interaction with the DOM, that is triggered by an action but changes outside of the React app
- How do I show the Google passport oAuth consent screen in the react frontend, not with express views template
- React Router v5: history.push() changes the address bar, but does not change the page
- URL changes but page new page is not rendered Ionic React , IonReactRouter with history
- react router changes the URL, but the component is not rendered
More Query from same tag
- I am trying to fetch json data from Rest API into react, but it showing some error
- How can I store/setStates of several inputs from a mapped array
- Rendering of page before data from useEffect is recieved
- ReactJs how to access to DOM element
- Can react hooks be used to inject components?
- Error: Maximum update depth exceeded. in react
- How can I merge AngularJS , React and Redux?
- How to properly route to dynamic page using reactjs? 404 page unreachable
- handling file download from api call
- Rendering SVG in React.js
- Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError
- Glide.js with react issue
- Variable can't be used in useEffect Hook
- How to import Json file with React lazy loading?
- React: why we have callback in setState?
- How to render a HTML string in React?
- How to make the state update in React with the last added task?
- How do I import Modernizr in React
- React (Refs to Component): Unable to use "ref" with "conditional rendering"
- How do I render different data of an onClick event without updating the previous render?
- Why do we need to return a function in the React Hook?
- Infinite loop in React button
- How to set Form.Item name of nested object
- JavaScript: Multiple cropping selection in one image?
- How sort a value inside a map looping in ReactJS
- TypeScript: Did you mean to call this expression?
- Stripe reactjs - could not find elements context
- javascript bookmark script for filling text boxes not working for React page?
- How to pass a function down the component's hierarchy without using props in React?
- Best practice to handle data from API call and render React components