I am trying to implement a gauge chart using high chart from data -100 to +100, when I tried to set initial data > 50 means custom marker aligning on the gauge. But if data is < 50 (Ex: 20 ) means custom marker is not aligning on the gauge line. JSFiddleLink
I tried in many way but unable to acheive.
Highcharts.chart('container', {
chart: {
style: {
fontFamily: "FuturaPTCond",
fontSize: "16px"
},
type: "solidgauge",
events: {
load: function() {
var elementSVG;
var chart = this,
counter = 0,
drawCircle = setInterval(function() {
if (++counter >= 1000) {
clearInterval(drawCircle);
}
renderCircle(chart);
function renderCircle(chart) {
let chartData = chart.userOptions.series[0].data[0];
let color =
chartData < -21
? "#DC143C"
: chartData > -21 && chartData < 21
? "#FF4500"
: chartData > 21 && chartData < 51
? "#FFFF00"
: chartData > 51 && chartData < 71
? "#00BFFF"
: chartData > 71 && chartData < 91
? "#ADFF2F"
: "#FF1493";
var series = chart.series[0],
pathDivided = series.points[0].graphic.attr("d").split(" "),
pathElemArr = [];
pathDivided.forEach(function(el, inx) {
if (el === "L") {
pathElemArr.push(parseFloat(pathDivided[inx + 1]));
pathElemArr.push(parseFloat(pathDivided[inx + 2]));
}
});
if (elementSVG) {
elementSVG.destroy();
}
document.getElementById(
"BackgroundColor"
).style.backgroundColor = "#fff";
elementSVG = chart.renderer
.circle(pathElemArr[0] + 11.25, pathElemArr[1], 10)
.attr({
fill: "#fff",
stroke: color,
width: "30px",
"stroke-width": 8,
zIndex: 10,
startAngle: -90,
endAngle: 90
})
.add();
}
}, 1);
$(".highcharts-axis-title").attr("x", 600.5);
$(".highcharts-axis-title").attr("y", 395.25);
$(".highcharts-credits").attr("x", 725);
},
redraw: function() {
$(".highcharts-axis-title").attr("x", 600.5);
$(".highcharts-axis-title").attr("y", 395.25);
$(".highcharts-credits").attr("x", 725);
}
}
},
title: null,
pane: {
center: ["50%", "85%"],
size: "98%",
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: "#ffff",
innerRadius: "0%",
outerRadius: "0%"
},
shape: "arc"
},
// the value axis
yAxis: {
lineWidth: 0,
tickWidth: 0,
min: -100,
max: 100,
title: {
text: "<p style='font-size: 20px; font-weight: bold'>Last 30 Days</p>",
style: {
color: "grey"
}
},
tickPositions: [-100, -20, 20, 50, 70, 90, 100],
minorTickInterval: 0,
tickAmount: 0,
plotBands: [
{
from: -100,
to: -23,
borderWidth: 5,
borderColor: "#DC143C",
color: "#DC143C",
outerRadius: "95%"
},
{
from: -20,
to: 18,
borderWidth: 5,
borderColor: "#FF4500",
color: "#FF4500",
outerRadius: "95%"
},
{
from: 21,
to: 48,
borderWidth: 5,
borderColor: "#FFFF00",
color: "#FFFF00",
outerRadius: "95%"
},
{
from: 51,
to: 68,
borderWidth: 5,
borderColor: "#00BFFF",
color: "#00BFFF",
outerRadius: "95%"
},
{
from: 71,
to: 88,
borderWidth: 5,
borderColor: "#ADFF2F",
color: "#ADFF2F",
outerRadius: "95%"
},
{
from: 91,
to: 100,
borderWidth: 5,
borderColor: "#FF1493",
color: "#FF1493",
outerRadius: "95%"
}
],
labels: {
enabled: true,
distance: 10,
rotation: 0,
format: "<span style='fill:#00000; font-size: 16px'>{value}</span>"
}
},
plotOptions: {
solidgauge: {
borderColor: "#009CE8",
borderWidth: 0,
radius: 90,
innerRadius: "90%",
dataLabels: {
enabled: true,
y: 5,
borderWidth: 0,
useHTML: true,
format:
'<div id="BackgroundColor" style="Width: 50px;text-align:center"><span style="font-size:70px;color: #000000; margin-left: -20px">{y}</span></div>'
}
}
},
series: [
{
name: "Speed",
data: [20],
animation: {
duration: 1500
}
}
]
});
I think something is wrong with how you are parsing the d attribute of the path?
Also, when you enter 100 as the data the circle is a bit short of 100?
And when you have data as 0 or 100, the circle is on the faint blue line, but otherwise, at zero (in the middle) it is off from the faint blue line:
This suggests to me that the x-position is correct but the y-position is offset negative direction (towards the top of the svg) and needs to be pushed down (translate positive y)
I changed the color to black just to see it better and then you can see with transform: 'translate(0 10)' the black circle falls perfectly on the light blue line (and also when the data is 100 it lines up with 100 correctly):
Finally, with all inner and outer radius adjusted etc. to centre it:
Note the following style is added to remove the light blue line from the chart:
<style>
.highcharts-point{
opacity: 0;
}
</style>
Probably, this translation(0 10) is needed because of this element (and its translation):
<g data-z-index="0.1" class="highcharts-series highcharts-series-0 highcharts-solidgauge-series highcharts-tracker" transform="translate(10,10) scale(1 1)" clip-path="url(#highcharts-fh3kcab-2-)"/>
Full working demo: https://jsfiddle.net/alexander_L/1yewj7r5/26/
Related
I am starting from this Highcharts activity gauge and trying to have two of them, aligned horizontally (similar to this other example) and synchronised.
I started modifying the code from the 1st example, based on the 2nd example, and so far I am unsuccessful, the 2nd chart doesn't even display successfully.
What I am doing wrong?
My code, also in JSFiddle:
function renderIcons() {
// Move icon
if (!this.series[0].icon) {
this.series[0].icon = this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8])
.attr({
'stroke': '#303030',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.add(this.series[2].group);
}
this.series[0].icon.translate(
this.chartWidth / 2 - 10,
this.plotHeight / 2 - this.series[0].points[0].shapeArgs.innerR -
(this.series[0].points[0].shapeArgs.r - this.series[0].points[0].shapeArgs.innerR) / 2
);
// Exercise icon
if (!this.series[1].icon) {
this.series[1].icon = this.renderer.path(
['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8,
'M', 8, -8, 'L', 16, 0, 8, 8
]
)
.attr({
'stroke': '#ffffff',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.add(this.series[2].group);
}
this.series[1].icon.translate(
this.chartWidth / 2 - 10,
this.plotHeight / 2 - this.series[1].points[0].shapeArgs.innerR -
(this.series[1].points[0].shapeArgs.r - this.series[1].points[0].shapeArgs.innerR) / 2
);
// Stand icon
if (!this.series[2].icon) {
this.series[2].icon = this.renderer.path(['M', 0, 8, 'L', 0, -8, 'M', -8, 0, 'L', 0, -8, 8, 0])
.attr({
'stroke': '#303030',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.add(this.series[2].group);
}
this.series[2].icon.translate(
this.chartWidth / 2 - 10,
this.plotHeight / 2 - this.series[2].points[0].shapeArgs.innerR -
(this.series[2].points[0].shapeArgs.r - this.series[2].points[0].shapeArgs.innerR) / 2
);
}
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
//height: 200,
height: '50%',
events: {
render: renderIcons
}
},
title: {
text: 'Activity',
style: {
fontSize: '24px'
}
},
tooltip: {
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: (this.chart.chartWidth - labelWidth) / 2,
y: (this.chart.plotHeight / 2) + 15
};
}
},
pane: [{
startAngle: 0,
endAngle: 360,
center: ['25%', '50%'],
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
}]
},
{
startAngle: 0,
endAngle: 360,
center: ['75%', '50%'],
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,
pane: 0,
tickPositions: []
},
{
min: 0,
max: 100,
lineWidth: 0,
pane: 1,
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%',
yAxis: 0,
pane: 0,
y: 80
}]
}, {
name: 'Exercise',
data: [{
color: Highcharts.getOptions().colors[1],
radius: '87%',
innerRadius: '63%',
yAxis: 0,
pane: 0,
y: 65
}]
}, {
name: 'Stand',
data: [{
color: Highcharts.getOptions().colors[2],
radius: '62%',
innerRadius: '38%',
yAxis: 0,
pane: 0,
y: 50
}]
},
{
name: 'Move',
data: [{
color: Highcharts.getOptions().colors[0],
radius: '112%',
innerRadius: '88%',
yAxis: 1,
pane: 1,
y: 75
}]
}, {
name: 'Exercise',
data: [{
color: Highcharts.getOptions().colors[1],
radius: '87%',
innerRadius: '63%',
yAxis: 1,
pane: 1,
y: 60
}]
}, {
name: 'Stand',
data: [{
color: Highcharts.getOptions().colors[2],
radius: '62%',
innerRadius: '38%',
yAxis: 1,
pane: 1,
y: 45
}]
}
]
});
<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: 800px; height: 300px; margin: 0 auto"></div>
The problem in your example is that you don't have separate charts but one chart with two yAxis. Check Highcharts synchronized charts example here: jsfiddle. Notice, that each chart is separate and inserted into separate div container.
So firstly create two solidgauge type charts and align them horizontally. Then add mousemove trigger on a container div element that contains your charts. Highcharts wrap all browser events and when you hover over charts series you have information about a hovered chart, series etc.
Use hovered series index to invoke onMouseOver() method on proper series in both charts and refresh tooltip with the point from hovered series:
HTML:
<div id="container">
<div id="container1"></div>
<div id="container2"></div>
</div>
JS:
['mousemove', 'touchmove', 'touchstart'].forEach(function(eventType) {
document.getElementById('container').addEventListener(
eventType,
function(e) {
var chart,
point,
i,
seriesIndex,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e);
if (event.srcElement.point) {
seriesIndex = event.srcElement.point.series.index;
}
if (chart.series[seriesIndex]) {
point = chart.series[seriesIndex].points[0];
chart.series[seriesIndex].onMouseOver();
chart.tooltip.refresh(point);
}
}
}
);
});
Notice, Highcharts.charts contains all charts reference.
Demo:
https://jsfiddle.net/wchmiel/ce01y63s/
Api reference:
Highcharts.Series.onMouseOver
Highcharts.charts
I have tried and came this far, but still not able to implement as per requirement.
var chart = new Highcharts.chart('container', {
chart:{
type:'gauge',
backgroundColor:'#000',
},
title: {
text: null,
},
tooltip: {
enabled: false
},
pane: {
center: ['50%', '55%'],
size: '250',
startAngle: -135,
endAngle: 135,
background: {
backgroundColor:'rgba(255, 255, 255, 0)',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc',
borderWidth: 1,
},
},
plotOptions: {
gauge: {
dial: {
radius: '92%',
backgroundColor: '#fff',
borderColor: '#fff',
borderWidth: 0,
baseWidth: 4,
topWidth: 1,
baseLength: '80%', // of radius
rearLength: '-67%'
},
pivot: {
radius: '0%',
borderWidth: 0,
borderColor: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
}
}
},
yAxis: [{
min: 0,
max: 250,
minPadding:5,
minorTickInterval: 3,
minorTickLength: 38,
minorTickWidth: 2,
offset:-10,
minorTickPosition: 'inside',
minorTickColor: 'rgba(255, 255, 255, 0.3)',
tickPixelInterval:100,
tickWidth: 2,
tickPosition: 'inside',
tickLength:-10,
tickColor: '#fff',
lineWidth :1,
labels: {
step: 1,
distance: 16,
rotation: 'auto',
style:{'color':'#fff','font-weight':'bold', 'font-size': '10px'}
},
plotBands: [{
from: 0,
to: 40,
color: '#31B710' // green
}, {
from: 40,
to: 125,
color: '#12B3D9' // blue
}, {
from: 125,
to: 175,
color: '#DD3308' // red
}],
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true,
enabled:false,
}
}
},
}],
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [175],
dataLabels: {
align: "center",
borderWidth:0,
borderColor: "rgba(255, 255, 255, 0)",
className:"gauge-center-text",
style:{
'color': '#fff',
'fill': '#fff',
'font-weight': 'normal',
'font-family': 'gargi',
},
useHTML:true,
verticalAlign:'middle',
x:0,
y:0,
format: '<div style="text-align:center; color:#fff; font-family: gargi; font-weight: normal; line-height: 33px;"><span style="text-align: center;font-size:38px; font-family: gargi; font-weight: normal; display:block;">{y}</span><span style="text-align: center;font-size:14px; font-family: gargi; font-weight: normal;" >Social Good</span></div>',
},
}]
});
Please refer the fiddle to get the development done by me.
fiddle
And image to check the required gauge chart.
Please anyone have done this far so please help
You need two y axes, because you need two sets of ticks - the one with labels which extends to whole arc, and the other which extends to the dial.
The second y axis should be linked to the first and you need to set ticks manually with axis.tickPositioner.
{
linkedTo: 0,
offset: -15,
lineWidth: 0,
labels: {enabled: false},
minorTickInterval: null,
tickWidth: 1,
tickLength: 35,
tickColor: 'rgba(255, 255, 255, 0.3)',
tickPositioner: function () {
//generate ticks from 0 to 175
var interval = 3;
return Array.apply(null, Array(Math.round(175 / interval))).map((v, i) => i * interval);
}
}
Dotted lines can be set with svg presentation attribute stroke-dasharray applied on .highcharts-pane class.
.highcharts-pane {
stroke-dasharray: 1, 3
}
example: http://jsfiddle.net/yuvdddL1/
How can I achieve this using highcarts? tired using stops:[...] but it will not work as above image.
yAxis: {
min: 0,
max: 100
},
series: [{
name: 'customers',
data: [{
color: {
//
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0},
stops: [
[0.1, '#009a60'],
[0.2, '#4aa84e'],
[0.3, '#92b73a'],
[0.4, '#c6bf22'],
[0.5, '#edbd02'],
[0.6, '#ffad00'],
[0.7, '#ff8c00'],
[0.8, '#fc6114'],
[0.9, '#f43021'],
[1.0, '#ed0022']
]
},
y:76
}],
dataLabels: {
format: '<div class="prc" style="text-align:center;"><span style="font-weight:normal; font-family:Helvetica Neue, Helvetica, Arial; font-size:52px;' +
'#333' + '">{y}</span>'
}
}]
One way of getting this char could be to use axis line and ticks to cover a chart to create white spaces. Next you could add more points and set stops with a color format that is not supported for a gradient - like hex color format with 3 digits ("#rgb").
Demo: http://jsfiddle.net/bsdtsmyb/
$(function() {
var rawData = 94,
data = getData(rawData);
function getData(rawData) {
var data = [],
start = Math.round(Math.floor(rawData / 10) * 10);
data.push(rawData);
for (i = start; i > 0; i -= 10) {
data.push({
y: i
});
}
return data;
}
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
marginTop: 10
},
title: {
text: ''
},
subtitle: {
text: rawData,
style: {
'font-size': '60px'
},
y: 200,
zIndex: 7
},
tooltip: {
enabled: false
},
pane: [{
startAngle: -120,
endAngle: 120,
background: [{ // Track for Move
outerRadius: '100%',
innerRadius: '80%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0,
shape: 'arc'
}],
size: '120%',
center: ['50%', '65%']
}, {
startAngle: -120,
endAngle: 120,
size: '95%',
center: ['50%', '65%'],
background: []
}],
yAxis: [{
min: 0,
max: 100,
lineWidth: 2,
lineColor: 'white',
tickInterval: 10,
labels: {
enabled: false
},
minorTickWidth: 0,
tickLength: 50,
tickWidth: 5,
tickColor: 'white',
zIndex: 6,
stops: [
[0, '#fff'],
[0.101, '#0f0'],
[0.201, '#2d0'],
[0.301, '#4b0'],
[0.401, '#690'],
[0.501, '#870'],
[0.601, '#a50'],
[0.701, '#c30'],
[0.801, '#e10'],
[0.901, '#f03'],
[1, '#f06']
]
}, {
linkedTo: 0,
pane: 1,
lineWidth: 5,
lineColor: 'white',
tickPositions: [],
zIndex: 6
}],
series: [{
animation: false,
dataLabels: {
enabled: false
},
borderWidth: 0,
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '80%',
data: data
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<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="height: 300px;">
</div>
Even this is the old question, I hope the below demo will helpful for the new users:
Demo
I'm using the latest version of high charts. I successfully created a 3d bubble chart following http://www.highcharts.com/demo/bubble-3d
I am wondering if I can add to the legend a reference to what the size of the bubble means. Just a simple bubble with some text next to it would be enough.
Thanks in advance for your help.
Just add an empty series and name it.Give it desired name ,See Updated fiddle here
{
name :"description",
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
]
}
}}
Representing bubble size in a legend is not currently a feature of Highcharts.
You can draw one manually:
Add a series for the legend
Draw a rendered box around the legend
JSFiddle
Add a series for the legend
series: [{
// This series gives a legend for reference
data: [{
color: Highcharts.getOptions().colors[0],
x: 86,
y: 25,
z: 10,
dataLabels: {
format: '10%',
y: 40
}
}, {
x: 90,
y: 25,
z: 15,
dataLabels: {
format: '15%',
y: 40
}
}, {
x: 94,
y: 25,
z: 35,
dataLabels: {
format: '35%',
y: 40
}
}]
}, {
color: Highcharts.getOptions().colors[0],
data: [{
x: 95,
y: 95,
z: 13.8,
name: 'BE',
country: 'Belgium'
}, {
Draw a rendered box around the legend
events: {
load: function() {
// Draw the flow chart
var ren = this.renderer,
colors = Highcharts.getOptions().colors;
// Script label
ren.label('Obesity Rate', 410, 220)
.attr({
stroke: '#777',
'stroke-width': 1,
padding: 5,
r: 5,
width: 168,
height: 73
})
.css({
color: '#333',
textAlign: 'center',
fontSize: '1.1em'
})
.add();
}
}
I have the following issue with highcharts SolidGauge.
Please find some context - SolidGauge is to be displayed for each comment that I call from MySql. Each comment brings in to PHP variable [$myvalue] a proprietary value per comment ID - [$myvalue] called outside of the Chart code, in the same file, works perfectly fine and shows distributed values correctly for each comment.
Issue - [$myvalue] shows duplicate value for each chart displayed in the UI - mor exactly the last comment value which is [8] - so all the Charts are showing value [8]. Please help :) I've tried everything (from unset, destroy etc)
$(function () {
$(document).ready(function () {
// The speed gauge
$('.container-speed').each(function() {
var chart = new Highcharts.Chart({
chart: {
type: 'solidgauge',
backgroundColor:'rgba(255, 255, 255, 0.1)',
renderTo: this
},
pane: {
center: ['50%', '50%'],
size: '65%',
startAngle: 0,
endAngle: 360,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#f5f5f5',
innerRadius: '90%',
outerRadius: '80%',
shape: 'circle'
}
},
tooltip: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -15,
borderWidth: 0,
useHTML: true
}
}
},
title: null,
yAxis: {
min: 0,
max: 8,
stops: [
[0.99, '#55BF3B'], // green
[1.1, '#DDDF0D'], // yellow
[1.2, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 100,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 90,
x: 30
}
},
credits: {
enabled: false
},
series: [{
data: [<?php echo $myvalue; ?>],
dataLabels: {
format: '<div style="text-align:center;"><span style="font-size:14px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'gray') + '"><?php echo $myvalue; ?></span></div>'
}}] }) })
})
});
you should iterate over values, while invoking
$('.container-speed').each(function() //pass value in this function
pass value in this function and then call it in datalabels.
$( document ).ready(function() {
var gaugeOptions = {
chart: {
type: 'solidgauge',
backgroundColor:'rgba(255, 255, 255, 0.1)'
},
title: null,
pane: {
center: ['50%', '50%'],
size: '55%',
startAngle: 0,
endAngle: 270,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#f5f5f5',
innerRadius: '90%',
outerRadius: '90%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[1.0, '#55BF3B'], // green
[1.1, '#DDDF0D'], // yellow
[1.3, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 45,
tickWidth: 1,
title: {
y: -70
},
labels: {
y: 90,
x: 30
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -15,
borderWidth: 0,
useHTML: true
}
}
}
};
// My Container
$('#container_myContainer_<? echo $comment->comment_ID ?>').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 8
},
credits: {
enabled: false
},
series: [{
data: [<? echo get_comment_meta( $comment->comment_ID, 'myValue', true )?>],
dataLabels: {
format: '<div style="text-align:center;"><span style="font-size:14px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'gray') + '"><? echo get_comment_meta( $comment->comment_ID, 'myValue', true )?></span></div>'
}
}]
}))
})