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
- Angular 9 Highcharts - when using series of type pie with type gauge the innerSize of pie is not working
- Highcharts Solid Gauge with min number NOT zero
- Highcharts solid gauge with tick mark over the bar
- Highcharts solid gauge with multiple series
- Not able to animate solid gauge chart with Angular Highcharts
- In Highcharts How to keep rectangle such SVG elements attached with series data but not with pixel when resize,reflow,redraw,zooming in out?
- Highcharts code with same set of code/data works in PHP but does not work in JSfiddle
- How to export the whole page or html content with Highcharts not just the chart?
- Add a gap between the second and third series in a Highcharts column plot with four series displayed
- Highcharts - Scatter chart with a line connecting the dots in the series
- Can I with highcharts column stacking on hover not highlighting the whole serie
- How do I use an Highcharts Solid Gauge in angular 6 with typescript?
- Highcharts not displaying series data for graph with multiple Y-axes
- How do I hide a Highcharts series from the chart, but always show it in the tooltip?
- Highcharts show the same yAxis start and end value with multiple data series
- I had created a scatterplot using Highcharts but the the point.z value is not getting displayed in tooltip
- c# WPF Webbrowser with Highchart, Javascript from external source not working "An error has occurred in the script on this page"
- Gauge highcharts is not resize with ionic 2
- HighCharts Solid Gauge Chart not displaying ticks
- HighCharts not updating when the state changes in React
- Highcharts oncahnge event It works on the first try but not on the second try
- How to create a solid gauge chart with Highcharts in angular 6?
- Highcharts multiple x axis and yaxis. The width of the 1st x-axis is not in sync with browser resize
- How can I style my highcharts solid gauge to have a background behind the percentage?
- Why does my addSeries (in highcharts) only display names of the series but not the actual pie chart itself
- Highcharts not working when pass the javascript variable as hightcharts series data
- highcharts x-axis not showing with series of just one value
- HighCharts : Tooltips exist but line is not drawn in the chart
- HighCharts line series not displaying properly with stacked bar combo chart
More Query from same tag
- How to re-create the same chart in Highcharts as seen on the mock?
- HighCharts: How to get a specific color for value 0
- Highcharts remove legend and series from chart on legendItemClick
- Highchart: Only show one series at a time
- make json string to match exact string for pie chart datasource?how to
- HighCharts - timeseries chart - irregular datetime interval on xAxis
- highchart - irregular time series
- Drilldown for grouped column chart in highcharts
- R Highcharter: dynamic drilldown in Shiny on the fly
- Memory leak in setInterval() method
- Highcharts - date on xAxis label difference on tooltip
- Highcharts add legend on export
- Get javascript highcharts to render inside a Bootstrap Popover
- High charts, providing data for xAxis instead of Series
- Can I lay two Highcharts series side-by-side?
- Multiple Highcharts on a PDF page - SVG Page Layout
- how to show mutipal dynamic highcharts based on json data
- Highcharts: Dynamically change axis on legendItemClick
- Highchat yaxis offset property moves grid lines as well
- How to load more than on CSV file in highcharts?
- How do I create data binding between highcharts and Polymer 1.0
- How to add plotline on highcharts with angle?
- Highcharts Pie doesn't display the labels (for some data series)
- Highchart stockChart Installation in Web Component
- Append a Jade file to a div in parent Jade file on Button click
- Highcharts - Double click event
- highcharts data labels overlaps the plotlines value
- Auto Refreshing Highcharts with PHP/JS
- Django query database and send data to template
- How to add custom CSS to the highcharts.js anchor <a> tags with links