I'm building a vertical gauge and am having problems applying a custom image in place of the default marker.
Although the image renders, it's placement is off. I can't seem to get it to point exactly where the marker is positioned and I'm not sure if applying a static offset value to the 'y' attribute is the right approach.
Here's a fiddle.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
marginBottom: 25,
marginTop: 70,
marginLeft: 65,
marginRight: 10,
},
xAxis: {
categories: ['One'],
lineColor: 'white',
labels: {
enabled: false
},
tickLength: 0,
min: 0,
max: 2
},
plotOptions: {
column: {
stacking: 'normal',
animation: false,
borderWidth: 0,
}
},
yAxis: {
min: 0,
max: 9026,
tickInterval: 9026,
tickLength: 0,
tickWidth: 0,
tickColor: '#C0C0C0',
gridLineColor: '#C0C0C0',
gridLineWidth: 0,
minorTickInterval: 25,
minorTickWidth: 0,
minorTickLength: 0,
minorGridLineWidth: 0,
title: null,
labels: {
formatter: function () {
if (this.isFirst || this.isLast) {
return this.value;
}
},
x: 0
},
},
legend: {
enabled: false
},
series: [
{
data: [4513],
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, 'red'],
[1, 'orange']
]
}
},
{
data: [4513],
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, 'orange'],
[1, 'green']
]
}
},
{
type: 'scatter',
data: [3120],
marker: {
enabled: true,
symbol: 'circle'
},
dataLabels: {
useHTML: true,
formatter: function () {
return '<img width="40px" height="40px" src="http://icongal.com/gallery/image/57585/small_arrow_black_monotone_left.png" />'
},
enabled: true,
align: 'right',
x: -3,
y: 2,
overflow: "justify"
}
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 178px; height: 242px;"></div>
Would appreciate any help, thanks!
You should adjust the image position via x, y properties.
x: 0,
y: 30,
example: https://jsfiddle.net/ptezqnbf/1/
or even better, use renderer.image and control the position directly.
function renderImage() {
var chart = this,
point = chart.get('point'),
imgWidth = 40,
imgHeight = 40;
if (!chart.dataLabelImg) {
chart.dataLabelImg = this.renderer.image('http://icongal.com/gallery/image/57585/small_arrow_black_monotone_left.png', -1000, -1000, imgWidth, imgHeight).add(point.series.dataLabelsGroup);
}
chart.dataLabelImg.attr({
x: point.graphic.x + (imgWidth - 15) / 2,
y: point.graphic.y - (imgHeight - 10) / 2
});
example: https://jsfiddle.net/tpp1gdau/1/
Related
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/
I want to implement speedometer to display internet bandwidth speed but I want to change its number sequence. I have search a lot but couldn't find anything.
Please find below code snippet for the highchart gauge. I want to change the label (number). In below example number sequence is 0,10,20,30,...,100.
But my requirement is number sequence should be 0,1,5,10,20,30,40,50,60,70,80,90,100
Check following image of gauge:
Highchart image
But my requirement is number sequence should be 0,1,5,10,20,30,40,50,60,70,80,90,100
Is there any way to change the numbers ?
Highcharts.chart('container', {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
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: 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: 'Mbps'
},
plotBands: [{
from: 0,
to: 60,
color: '#55BF3B' // green
}, {
from: 60,
to: 80,
color: '#DDDF0D' // yellow
}, {
from: 80,
to: 100,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
<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 specify specific tick-positions using yAxis.tickPositions (API).
In your case:
yAxis: {
tickPositions: [0,1,5,10,20,30,40,50,60,70,80,90,100]
}
In your example you have yAxis.labels.step set to 2, which needs to be removed so that you don't skip over any labels for your defined tickPositions (unless you want to that is).
See this JSFiddle demonstration of your suggested labels.
I am using ng-highcharts and I'm trying to create a gauge that can handle negative values, I have almost got there. However, I want zero to be at the top (in others words, I want the chart to be rotated 90 degrees to the right), and for some reason, the -200 value is printed twice/overlapping. What am I missing/doing wrong?
http://jsfiddle.net/Hjdnw/2006/
this is what it should ideally look like, but I want the same thing in ng-highcharts so I can use in my angular application
http://jsfiddle.net/5rncm2nn/1/
I tried creating my own directive instead of using ng-highcharts,and its working as expected for me.
Also remove the options object which is wrapping the chart object in your config, that might also be creating problem
Use this config
{
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
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: -200,
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: 200,
color: '#55BF3B' // green
}, { from: -200,
to: 0,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
}
Same as yours just removed the options object
Checkout this fiddle
http://jsfiddle.net/Hjdnw/2010/
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/
I'm using highcharts and i'd like to show a big gauge(500x500px).
Resizing the gauge was quite easy, but the small block with the value in it doesn't resize. How can I make that small block bigger?
Thanks for the help!
jsFiddle: http://jsfiddle.net/AVd8k/
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
width: 500,
height: 500
},
title: {
text: 'Speedometer'
},
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'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});
try this by replacing series (whole object) with:
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
},
dataLabels: {
enabled: true,
style: {
//fontWeight:'bold',
fontSize: '22px'
}
}
}]
Proof: http://jsfiddle.net/nmQfE/
Of course, you can adjust the font size as you want
It looks like the property you are after is:
plotOptions.gauge.dataLabels.style.fontSize
http://api.highcharts.com/highcharts#plotOptions.gauge.dataLabels.style
Try adding something like this to the options:
plotOptions: {
gauge: {
dataLabels: {
style: {
fontSize: '60px'
}
}
}
}
You may need to reposition it using the x and y properties.