I use react-highcharts to create a SolidGauge in my Dashboard Page.
and draw rounded edges.
So , I setting the plotOptions.rounded to true.
code:
import ReactHighcharts from 'react-highcharts';
import HighchartsMore from 'highcharts-more';
import SolidGauge from 'highcharts-solid-gauge';
HighchartsMore(ReactHighcharts.Highcharts);
SolidGauge(ReactHighcharts.Highcharts);
...
<ReactHighcharts config={ config }/>
config = {
...
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
linecap: 'round',
rounded: true,
stickyTracking: false
}
}
}
It is working in official jsfiddle with same config setting.
but ReactHighcharts is not working.
Does anyone have a suggestion or can help ?
Thank you for any help you can provide.
07/14 update
code:
import React, { Component } from 'react';
import ReactHighcharts from 'react-highcharts';
import HighchartsMore from 'highcharts-more';
import SolidGauge from 'highcharts-solid-gauge';
class Demo extends Component {
constructor (props) {
super(props);
HighchartsMore(ReactHighcharts.Highcharts);
SolidGauge(ReactHighcharts.Highcharts);
}
render () {
return (
<ReactHighcharts config={
multiChartsConfig(460,60,40,10,'Total','Sent')}></ReactHighcharts>
);
}
}
const multiChartsConfig = (value, open, click, placement, str1, str2) => {
return {
chart: {
type: 'solidgauge',
height: 180,
width: 185,
marginTop: 10,
marginBottom: 0,
style: { margin: 'auto' }
},
title: null,
pane: {
startAngle: 0,
endAngle: 360,
background: [
{
backgroundColor: '#D8D8D8',
outerRadius: '110%',
innerRadius: '100%',
borderWidth: 0
},{
backgroundColor: '#D8D8D8',
outerRadius: '93%',
innerRadius: '83%',
borderWidth: 0
},{
backgroundColor: '#D8D8D8',
outerRadius: '76%',
innerRadius: '66%',
borderWidth: 0
}
]
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: '34px',
dataLabels: {
enabled: true,
borderWidth: 0,
y: -30,
useHTML: true,
formatter: () => {
return (`
<div style="text-align: center;font-size:15px;color: #777777;">
<div style="color: #009fc5;font-size: 17px;">${value.toLocaleString()}</div><div>${str1}</div><div>${str2}</div>
</div>
`);
}
},
linecap: 'round',
rounded: true,
stickyTracking: false
}
},
credits: {
enabled: false
},
series: [
{
name: 'open',
rounded: true,
data: [{
color: '#009fc5',
radius: '110%',
innerRadius: '100%',
y: Math.round(open * 100)
}]
},
{
name: 'click',
data: [{
color: 'green',
radius: '93%',
innerRadius: '83%',
y: Math.round(click * 100)
}]
},
{
name: 'placement',
data: [{
color: 'red',
radius: '76%',
innerRadius: '66%',
y: Math.round(placement * 100)
}]
}
]
};
}
The problem is where you're getting the solid gauge extension from. The highcharts-solid-gauge package is massively out of date.
Use this instead
import SolidGauge from 'highcharts/modules/solid-gauge';
Version you're using (see https://npmcdn.com/highcharts-solid-gauge#latest) is v4.2.3
Where as the current version is v5.0.12 - https://code.highcharts.com/modules/solid-gauge.js
If you go to the official JSFiddle example you referenced, and change the solid-gauge script src to https://npmcdn.com/highcharts-solid-gauge#latest you'll see the same problem you're having.
Related
i am using highcharts solid gauge. below is sample i have created
now i want to remove these grey bullets as these are not coming in my local but in test its there, i havn't got anything helpful from api. here are options passing to this.and thus i am not sure what i am missing can anyone guide me as i have tried looking into api for solid gauge but i am not sure which option is there to help me
options() {
return {
credits: {
enabled: false
},
chart: {
type: "solidgauge",
},
title: {
text: "",
style: {
fontSize: "24px"
}
},
legend: {
layout: "horizontal",
align: "right",
itemDistance: 100,
verticalAlign: "middle",
itemMarginTop: 5,
itemStyle: {
fontSize: "28px",
},
itemMarginBottom: 5,
labelFormatter: function() {
const formattedTotal = Number(
this.userOptions.data[0].total
).toLocaleString("en-US", {
minimumFractionDigits: 0,
maximumFractionDigits: 0
});
return (
'<span style="text-weight:bold;color:' +
this.userOptions.data[0].color +
'">' +
this.name +
'</span><br/><span style="text-align: center">' +
formattedTotal +
"</span>"
);
},
symbolWidth: 0
},
tooltip: {
borderWidth: 0,
backgroundColor: "none",
shadow: false,
style: {
fontSize: "16px"
},
useHTML: true,
pointFormat:
'<table><tr><td style="text-align: center"><span style="font-size: 14px">{series.name}</span><br><span style="font-size:22px; color: {point.color}; font-weight: bold">{point.y}%</span></td></tr></table>',
positioner: function(labelWidth) {
return {
x: (this.chart.chartWidth - labelWidth - 600) / 2,
y: this.chart.plotHeight / 2 - 15
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [
{
// Track for Move
outerRadius: "112%",
innerRadius: "88%",
backgroundColor: Highcharts.Color(this.graphColors && this.graphColors[0])
.setOpacity(0.3)
.get(),
borderWidth: 0
},
{
// Track for Exercise
outerRadius: "87%",
innerRadius: "63%",
backgroundColor: Highcharts.Color(this.graphColors && this.graphColors[1])
.setOpacity(0.3)
.get(),
borderWidth: 0
},
{
// Track for Stand
outerRadius: "62%",
innerRadius: "38%",
backgroundColor: Highcharts.Color(this.graphColors && this.graphColors[2])
.setOpacity(0.3)
.get(),
borderWidth: 0
}
]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: [],
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false,
},
linecap: "round",
stickyTracking: false,
rounded: true
}
},
series: [
{
name: "Passerby",
showInLegend: true,
data: [
{
color: this.graphColors && this.graphColors[0],
radius: "112%",
innerRadius: "88%",
y: this.passerby,
total: this.passerbyTotal
}
]
},
{
name: "Visitor",
showInLegend: true,
data: [
{
color: this.graphColors && this.graphColors[1],
radius: "87%",
innerRadius: "63%",
y: this.visitor,
total: this.visitorTotal,
}
]
},
{
name: "Connected",
showInLegend: true,
data: [
{
color: this.graphColors && this.graphColors[2],
radius: "62%",
innerRadius: "38%",
y: this.connected,
total: this.connectedTotal
}
]
}
],
}
}
I think you can just apply a style to the class highcharts creates to hide these markers:
.highcharts-legend-item rect {
display: none;
}
I'm not familiar with highcharts, but those bullets looks like the work of a <ul> element.
You can remove bullets from all ul elements using css, like this:
ul
{
list-style-type:none;
}
See list-style-type. Of course it is better to specify the #id of the particular ul element, but (above) is just an example.
It's not possible to remove legend symbols and keep series markers. As a workaround, you can remove them manually in the chart load event callback.
Code:
chart: {
type: "solidgauge",
events: {
load: function() {
var chart = this,
series = chart.series;
series.forEach(function(serie, i) {
if (serie.legendSymbol) {
serie.legendSymbol.destroy()
}
});
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/e1usLm08/1/
API:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#destroy
I trying to create a gauge chart with Highcharts. I need to decrease the width of my serie but unfortunately I don't found how to make that with highcharts.
This is my desired output :
And I make this gauge :
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
height: '65%',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
},
title: {
text: '',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
color: 'black',
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '13px'
},
align: 'center',
useHTML: true,
pointFormat: '<div style="font-size:2em; font-weight: bold;">{point.y}%</div><br><div style="text-align: center;">{series.name}</div>',
positioner: function(labelWidth) {
return {
x: (this.chart.chartWidth - labelWidth) / 2,
y: (this.chart.plotHeight / 2) - 22
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
.setOpacity(0.3)
.get(),
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
rounded: true
}
},
series: [{
name: 'Label',
data: [{
color: 'orange',
radius: '87%',
innerRadius: '63%',
y: 64
}]
}]
});
(function(H) {
H.wrap(H.Tooltip.prototype, 'hide', () => {});
}(Highcharts));
var obj = document.getElementById('container')
var chart = Highcharts.charts[obj.getAttribute('data-highcharts-chart')];
var tooltipPoint = chart.series[0].points[0];
chart.tooltip.refresh(tooltipPoint);
#container {
margin: 0 auto;
max-width: 400px;
min-width: 380px;
}
.highcharts-credits {
display: none;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="container"></div>
But as you can see, the width of my serie is to big. There is a way to decrease this width ?
You can achieve it by increasing pane.background.innerRadius and series.data.innerRadius.
Code:
pane: {
startAngle: 0,
endAngle: 360,
background: [{
outerRadius: '87%',
innerRadius: '80%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
.setOpacity(0.3)
.get(),
borderWidth: 0
}]
}
...
series: [{
name: 'Label',
data: [{
color: 'orange',
radius: '87%',
innerRadius: '80%',
y: 64
}]
}]
Demo:
https://jsfiddle.net/BlackLabel/wgomfLev/
API reference:
https://api.highcharts.com/highcharts/pane.background.innerRadius
https://api.highcharts.com/highcharts/series.solidgauge.data.innerRadius
I'm using angular6 and the office highcharts angular wrapper (https://github.com/highcharts/highcharts-angular) in version 2.4.0.
Everything is working good except the labels that can be placed manually on the chart.
I just don't manage to get them refreshed.
I have a graph that can be filtered through the back-end. When I get the new generated data I update the data in my chartOptions which are used in the html as [options]="chartOptions" for the angular component.
The chartOptions are instanciated from my default class like this: this.chartOptions = new GraphConfigSeqAtteptedVsAchived().chartOptions;
The Class looks like this:
`import * as Highcharts from 'highcharts';
export class GraphConfigSeqAtteptedVsAchived{
public chartOptions: any;
constructor(){
this.chartOptions = {
chart: {
height: 600,
width: 620,
events:{load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
},
backgroundColor: 'transparent',
},
credits: {
text: 'charname',
href: ''
},
labels: {
},
exporting:{
chartOptions:{
title: {
text:'not set',
style:{
color: '#000000'
},
margin: 0
}
}
},
tooltip: {
enabled: false
},
xAxis: {
min: -10,
max: 0,
width: 535,
title: {
text: 'Rainfall (mm)',
style: {
fontWeight: "bold",
color: '#000000'
}
},
reversed: true,
tickInterval: 1
},
yAxis: {
min: -10,
max: 0,
title: {
text: 'Rainfall (mm)',
style: {
fontWeight: "bold",
color: '#000000'
}
},
reversed: true,
tickInterval: 1
},
title: {
text: ' as',
margin: 0,
style:{
color: 'transparent'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 90,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1,
navigation: {
enabled: false
}
},
plotOptions: {
scatter: {
stickyTracking: false,
allowPointSelect: true,
marker: {
radius: 3,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '',
hideDelay: 500
},
symbol: "circle",
events: {
mouseOut: function() {
this.chart.myTooltip.hide();
this.chart.myTooltip.options.enabled = false;
},
mouseOver: function() {
if(this.halo) {
this.halo.attr({
'class': 'highcharts-tracker'
}).toFront();
}
},
click: function(event) {
this.chart.myTooltip.options.enabled = true;
this.chart.myTooltip.refresh(event.point, event);
}
}
},
line:{
events: {
legendItemClick: function () {
return false;
}
}
},
series:{
allowPointSelect: true
}
},
series: [{
type: 'line',
data: [[30, 30], [-30, -30]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 1
}
},
showInLegend: false,
color: "rgba(0, 0, 0, 0.6)",
enableMouseTracking: false
},{
type: 'line',
data: [[30, 29.5], [-29.5, -30]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(125, 162, 159, 0.35)",
enableMouseTracking: false
},{
type: 'line',
data: [[29.5, 30], [-30, -29.5]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(125, 162, 159, 0.35)",
enableMouseTracking: false
},{
type: 'line',
data: [[29, 30], [-30, -29]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(197, 144, 161, 0.35)",
enableMouseTracking: false
},{
type: 'line',
data: [[30, 29], [-29, -30]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(197, 144, 161, 0.35)",
enableMouseTracking: false
}]
}
}
}`
The generated data is in the typescript dynamically added and all of that works just fine. Everything is refreshed after I set the updateFlag for [(update)]="updateGraph". The axis titles are also fine.
The only thing that's not refreshed for me are the labels i dynamically added to the chart like this:
let labelTotalNumberOfEyes = {
html : this.translate.instant('GRAPHS.TOTAL_NUMBER_OF_EYES') + ': ' + (scatterSeries.data.length + scatterSeriesRetreatment.data.length),
style : {
left : '330px',
top : '368px',
fontSize : '14px',
backgroundColor: '#FFFFFF',
borderWidth: 1,
}
}
this.chartOptions.labels.items.push(labelTotalNumberOfEyes);
Does someone have any idea what I'm might doing wrong? I don't see any further option than just setting this update flag and it works fine for everything but the labels.
Please let me know if you're missing any information.
Thanks in advance.
This issue is actually a Highcharts bug. I've reported it here: https://github.com/highcharts/highcharts/issues/10429.
As a workaround, you can use Highcharts.SVGRenderer to add a custom label and store reference to it in your component. Next, when updating, call attr() method on the label (Highcharts.SVGElement) and set new options. Check demo and code posted below.
Add a label on chart callback:
constructor() {
const self = this;
this.chartCallback = chart => {
self.chart = chart;
self.label = chart.renderer
.text("test", 100, 100)
.css({
fill: "#555",
fontSize: 16
})
.add()
.toFront();
};
}
call attr() on the label while updating:
update_chart() {
const self = this,
chart = this.chart;
chart.showLoading();
setTimeout(() => {
chart.hideLoading();
self.chartOptions.series = [
{
data: [10, 25, 15],
name: "updatedSerieName"
}
];
self.chartOptions.yAxis.title.text = "updatedData";
self.label
.attr({
text: "test1",
x: 150,
y: 120
})
.css({
fill: "red",
fontSize: 20
});
self.updateFromInput = true;
}, 2000);
}
Demo:
https://codesandbox.io/s/8zo0yvqqwj
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
I want to put text on gauge activity path like this
But my gauge activity is like this
Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function (p, delay) {
if (this.options.alwaysVisible) {
return this.refresh(this.chart.series[0].data[0])
}
p.call(this, delay)
})
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
marginTop: 50
},
title: {
text: 'Activity',
style: {
fontSize: '24px'
}
},
tooltip: {
alwaysVisible: true,
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function (labelWidth) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2])
.setOpacity(0.3)
.get(),
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false,
rounded: true
}
},
series: [{
name: 'Move',
data: [{
color: Highcharts.getOptions().colors[0],
radius: '112%',
innerRadius: '88%',
y: 80
}]
}, {
name: 'Exercise',
data: [{
color: Highcharts.getOptions().colors[1],
radius: '87%',
innerRadius: '63%',
y: 65
}]
}, {
name: 'Stand',
data: [{
color: Highcharts.getOptions().colors[2],
radius: '62%',
innerRadius: '38%',
y: 50
}]
}]
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="container" style="width: 400px; height: 400px; margin: 0 auto">
</div>
I want to put text on gauge activity like 1st 2nd 3rd
Fiddle
Simply enable data labels and arrange them adequately using x and y properties.
API Reference:
https://api.highcharts.com/highcharts/plotOptions.series.dataLabels.style
https://api.highcharts.com/highcharts/plotOptions.series.dataLabels.x
https://api.highcharts.com/highcharts/plotOptions.series.dataLabels.y
Example:
http://jsfiddle.net/5v2hg81b/
Is there any simple example (preferibly with a JSFiddle) for an implementation of a full circle gauge with Highcharts like the one below from jQuery knob ?
Here is what I ve got so far : http://jsfiddle.net/skeletorkun/grn5o39e/1/
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '50%'],
size: '100%',
startAngle: 0,
endAngle: 360,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The RPM gauge
$('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'sth'
}
},
series: [{
name: 'RPM',
data: [92],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>'
},
tooltip: {
valueSuffix: ' revolutions/min'
}
}]
}));
});
You can realise that by solid-gauge and set a correct angles in pane.
pane: {
center: ['50%', '50%'],
size: '100%',
startAngle: 0,
endAngle: 360,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
Example: http://jsfiddle.net/e76o9otk/1/
Is jQuery roundSlider suitable for you ?
This was made with div elements only, so very easy to customize and flexible to use.
For more details check the demos page.
Demo on jsFiddle same as your requirement