We Keep Coding

Highcharts Gauge: Adding Icons

I'm trying to add icons in dataLabels, I successfully added some HTML like this return '<span style="color:#89891C">Partially rejected: ' + partial + '</span><br/>' +'<span style="color:#933">Rejected: ' + rejected + '</span>';, but now I want to add icons instead, I'm using **Ionicons*. Here's the code:
var chart=Highcharts.chart(id, {
chart: {
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor:'rgba(255, 255, 255, 0.0)'
},
exporting: { enabled: false },
title: {
text: ''
},
pane: {
startAngle: -150,
endAngle: 150,
background: {
from: 0,
to: partial+rejected,
backgroundColor: '#f55',
innerRadius: '85%',
outerRadius: '50%',
shape: 'arc',
},
},
yAxis: [{
lineWidth: 0,
min: 0,
max: parseInt(val),
tickInterval: 1,
tickPosition: 'outside',
minorTickColor: '#FF0000',
tickColor: '#FF0000',
tickWidth: 2,
tickLength: 10,
minorTickPosition: 'outside',
tickLength: 15,
minorTickLength: 5,
title:{text:'Total: '+val,style:{ color:"#333" }},
labels: {
distance: 25,
},
offset: 5,
endOnTick: false,
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
},
plotBands: [{
from: 0,
to: delivered,
color: '#21A121',
thickness: '15%',
id: 'plot-band-1'
}]
}],
series: [{
name: 'Managed',
data: [{
id: 'deliver',
y: parseInt(total),
dial: {
backgroundColor:'#D9972E',
radius: '100%',
baseWidth: 10,
baseLength: '5%',
baseWidth: 15,
rearLength: '0%',
}
}],
dataLabels: {
formatter: function () {
var total = this.y;
return '<i class="ion-information-circled" title="RP: '+partial+'" style="color:#EEF007"></i><i class="ion-information-circled" title="RT: '+rejected+'" style="color:#F00707"></i>';
},
backgroundColor: {
linearGradient: {
x1: 10,
y1: 10,
x2: 10,
y2: 11
},
stops: [
[0, '#DDD'],
[1, '#FFF']
]
}
},
tooltip: {
valueSuffix: ' '
}
}]
});
The part I'm trying to get right is at dataLabels, if there's any information you may need to understand what I'm trying to achieve, just ask me, thanks in advance

Simply, get Ionicons CSS file (https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css) and return adequate icon in dataLabels.formatter function. You need to remember that the property useHTML must be set to true.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.formatter
Example:
http://jsfiddle.net/h0xLzv8h/

How to get spacing between border and inner background color of a pie chart using highcharts?

By using the below code i got Pie chart as shown in this link: https://i.stack.imgur.com/WdyYA.png
But i need to get Pie Chart as shown in this link: https://i.stack.imgur.com/EscA8.png
Here is my code:
var highchartGraph = {
bindpieChart : function(percentage_c)
{
$('.piechart').highcharts({
chart: {
spacingBottom: -8,
spacingTop: -8,
spacingLeft: -8,
spacingRight: -8,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
type: 'pie',
width: null,
height: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
},
title: {
text: percentage_c+'%',
align: 'center',
verticalAlign: 'middle',
style: {
color: '#FFF',
fontSize: '18px',
fontFamily: 'arial'
},
y: 3,
x: 20
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {
},
},
states: {
hover: {
enabled: false,
brightness: 0
}
}
},
pie: {
borderWidth: 2,
borderColor: "#6821A5"
}
},
series: [{
name: " ",
colorByPoint: true,
data: [{
name: "Unrestricted",
y: percentage_c,
color: '#6821A5',
tooltip: false
}, {
name: "Restricted",
y: 100 - percentage_c,
color: '#FFF',
dataLabels: {
enabled: false
}
}]
}]
});
}
}

You could add another series that will create the border.
Demo: http://jsfiddle.net/rxp0noj5/
var percentage_c = 75;
$('#container').highcharts({
chart: {
spacingBottom: -8,
spacingTop: -8,
spacingLeft: -8,
spacingRight: -8,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
type: 'pie',
width: null,
height: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
},
title: {
text: percentage_c + '%',
align: 'center',
verticalAlign: 'middle',
style: {
color: '#FFF',
fontSize: '18px',
fontFamily: 'arial'
},
y: 3,
x: 20
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {},
},
states: {
hover: {
enabled: false,
brightness: 0
}
}
},
pie: {
borderWidth: 2,
borderColor: "none"
}
},
series: [{ // series for border
innerSize: '100%',
data: [1],
borderColor: 'red'
},{
size: '95%', // decresed size for padding between pie and border
name: " ",
colorByPoint: true,
data: [{
name: "Unrestricted",
y: percentage_c,
color: '#6821A5',
tooltip: false
}, {
name: "Restricted",
y: 100 - percentage_c,
color: 'none',
dataLabels: {
enabled: false
}
}]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

Highcharts: Change needle color of Gauge Chart on Hover

http://jsfiddle.net/2egpa8eb/
plotOptions: {
gauge: {
allowPointSelect: true,
states: {
hover: {
enabled: true,
marker: {
fillColor: "#FF0000",
lineColor: "#0000FF",
lineWidth: 5
}
}
}
}
},
I want to change the color of the "needle" on hover and select (see image below). I have used the above options as per api given in http://api.highcharts.com/highcharts#plotOptions.gauge.states but it did not work. Is there any way to achieve this?

You can style the needle on hover using CSS like this:
div.highcharts-container:hover g.highcharts-tracker > * {
fill :#f00;
}
You would need to ensure that div.highcharts-container was unique to just the charts you are targeting as this example is pretty generic, say you had multiple charts on the same page or using the same CSS for instance, this CSS would target them all.
I'm not sure what you can "select" on these charts to answer your second question.
http://jsfiddle.net/2egpa8eb/1/
$(function() {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
plotOptions: {
gauge: {
allowPointSelect: true,
states: {
hover: {
enabled: true,
marker: {
fillColor: "#FF0000",
lineColor: "#0000FF",
lineWidth: 5
}
}
}
}
},
pane: {
startAngle: -150,
endAngle: 150,
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%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 200,
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: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
});
});
div.highcharts-container:hover g.highcharts-tracker > * {
fill :#f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

You can refer to the load event and then attach the custom events by on declaration.
chart: {
type: 'gauge',
events:{
load:function() {
var chart = this,
graph = chart.series[0].data[0].graphic;
graph
.on('mouseover',function(){
graph.attr({
fill: 'red'
});
})
.on('mouseout',function(){
graph.attr({
fill: 'black'
});
})
.on('click', function() {
graph.attr({
fill: 'green'
});
});
}
}
},
http://jsfiddle.net/6dbegyvs/

trying to draw dotted lines over the chart

Hey Guys I'm trying to draw dotted lines over my highcharts chart but when I try this the lines either push the chart out of position or skip over the chart and continue past it.I'm also trying to put labels on the top of each barchart too
here's my code
$(function () {
$('#container5').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
tooltip: { enabled: false },
exporting: {
enabled:false
},
credits: {
enabled: false
},
legend: {
enabled:false
},
xAxis: {
labels:
{
enabled: false
},
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: 0,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
title: {
text: ''
},
categories: ['']
},
yAxis: {
labels:
{
enabled: false
},
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: 0,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
title: {
text: ''
},
min: 0,
title: {
text: ' '
},
},
plotOptions: {
column: {
stacking: 'normal',
animation: false
},
series: {
states: {
hover: {
enabled: false
}
}
}
},
series: [{
name: '10',
data: [10],
pointWidth: 50,
groupPadding: 0,
color: '#f7a35c'
}, {
name: '12',
data: [12],
pointWidth: 50,
groupPadding: 0,
color: '#004A98'
}, {
name: '12',
data: [12],
pointWidth: 50,
groupPadding: 0,
color: '#509ADC'
}]
});
});
and
<div class="col-md-2" id="container5" style="width: 200px; height: 700px; margin:auto"></div>
It looks like
Picture one
but I want it to look like this
Picture two

You can use Renderer.path to add custom line in the chart.
chart.renderer.path(['M', 0, 0, 'L', 100, 100])
.attr({
'stroke-width': 2,
stroke: 'red'
})
.add();

Deffine your plot lines on YAxis like this. Demo
yAxis: {
title: {
...
},
plotLines: [{
value: minValue,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Last quarter minimum'
}
}, {
value: maxValue,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Last quarter maximum'
}
}]
}
EDIT
In addition to, if you want to align the plotLines to the left you can try this:
Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
return ['M',x*2,y + height,'L',0,y + width];
};
DEMO

Highcharts: X-axis labels inside columns

I would like to place my X-axis labels inside my columns and rotated to a vertical position. I've searched the web endlessly, but as of now, nothing seems to work, so I'll try and post my specific problem.
Here's the fiddle:
http://jsfiddle.net/D43q9/1/
$(document).ready(function() {
function chart() {
var change = {
0: '',
25: '',
50: '',
75: '',
100: ''
};
$('#chart').highcharts({
legend: {
enabled: false
},
tooltip: {
enabled: false
},
chart: {
type: 'column',
marginTop: 0,
backgroundColor: 'transparent',
spacingTop: 0,
spacingRight: 20,
spacingBottom: 20,
spacingLeft: 20
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
groupPadding: 0.025
}
},
title: {
text: ''
},
xAxis: {
categories: ['Col1','Col2','Col3','Col4','Col5','Col6'],
labels: {
style: {
color: '#000',
font: '14px Nunito',
top: '100px'
},
},
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0
},
yAxis: {
max: 101,
labels: {
formatter: function() {
var value = change[this.value];
return value !== 'undefined' ? value : this.value;
},
style: {
color: '#fff',
font: '12px Nunito'
}
},
title: {
text: null
},
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: '#444',
gridLineColor: '#444'
},
credits: {
enabled: false
},
series: [{
name: '',
data: [95,70,80,60,100,75],
color: '#ffd800',
borderColor: 'transparent'
}]
});
};
chart();
});

Set rotation and y value for labels: http://jsfiddle.net/D43q9/2/
xAxis: {
categories: ['Col1','Col2','Col3','Col4','Col5','Col6'],
labels: {
rotation: -90,
y: -20,
style: {
color: '#000',
font: '14px Nunito',
top: '100px'
},
},
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0
}