I am trying to create a gauge using Highcharts.
In the gauge I want to render the text at the tip of the needle and the position of text should change when the needle tip position changes. I have already added the some text at the start positon and end position of gauge, I need to add third text according to needle tip.
Can you please have a look and let me know how I do it?
My jsfiddle link is http://jsfiddle.net/anchika/nszqbsgx/1/
var chart = new Highcharts.Chart({
chart: {
type: 'gauge',
renderTo: container,
marginTop: -60,
marginRight: 0,
spacingLeft: 0,
spacingBottom: 0,
backgroundColor: null,
},
pane: {
center: ['50%', '57%'],
size: '75%',
startAngle: -150,
endAngle: 150,
background: [{
borderColor: '#000',
}],
},
tooltip: {
enabled: false
},
title: {
text: null,
},
yAxis: {
min: 0,
max: 100,
title: {
y: -20,
useHTML: true,
text: 'graphTitle',
style: {
fontFamily: 'Raleway',
fontSize: '2em',
textAlign: 'center',
}
},
labels: {
enabled: false,
},
tickInterval: 16.66,
tickWidth: 5,
tickPosition: 'outside',
tickLength: 10,
tickColor: '#000',
minorTickColor: '#000',
lineColor: null,
plotBands: [{
from: 0,
to: 33,
color: '#00A600', // green
outerRadius: '100%',
thickness: '15%'
}]
},
plotOptions: {
gauge: {
innerRadius: '90%',
dial: {
backgroundColor: 'rgba(0,0,0,0.4)',
}
}
},
credits: {
enabled: false
},
series: [{
data: [33],
dataLabels: {
useHTML: true,
//format: gaugeFormat, //Modify here to change the radial center values
borderWidth: 0,
style:{
fontFamily:'Raleway',
fontWeight: 'normal',
},
x: 5,
},
tooltip: {
enabled: false,
}
}]
},
function (chart) { // on complete
chart.renderer.text('End Time',500,370)
.css({
color: '#000',
fontSize: '16px'
})
.add();
chart.renderer.text('Start Time', 240, 370)
.css({
color: '#000',
fontSize: '16px'
})
.add();
});
Edit:
I want something like this link
I`m not sure that understand your question completely,
Please check this link
var chart = new Highcharts.Chart({
chart: {
type: 'gauge',
renderTo: container,
marginTop: -60,
marginRight: 0,
spacingLeft: 0,
spacingBottom: 0,
backgroundColor: null,
},
pane: {
center: ['50%', '57%'],
size: '60%',
startAngle: -150,
endAngle: 150,
background: [{
borderColor: '#000',
}],
},
tooltip: {
enabled: false
},
title: {
text: null,
},
yAxis: {
min: 0,
max: 100,
title: {
y: -20,
useHTML: true,
text: 'graphTitle',
style: {
fontFamily: 'Raleway',
fontSize: '2em',
textAlign: 'center',
}
},
labels: {
enabled: false,
},
tickInterval: 16.66,
tickWidth: 5,
tickPosition: 'outside',
tickLength: 10,
tickColor: '#000',
minorTickColor: '#000',
lineColor: null,
plotBands: [{
from: 0,
to: 33,
color: '#00A600', // green
outerRadius: '100%',
thickness: '15%'
}]
},
plotOptions: {
gauge: {
innerRadius: '90%',
dial: {
backgroundColor: 'rgba(0,0,0,0.4)',
}
}
},
credits: {
enabled: false
},
series: [{
data: [100],
dataLabels: {
useHTML: true,
//format: gaugeFormat, //Modify here to change the radial center values
borderWidth: 0,
style:{
fontFamily:'Raleway',
fontWeight: 'normal',
},
x: 5,
},
tooltip: {
enabled: false,
}
}]
},
function (chart) { // on complete
console.log(chart); chart.renderer.text(chart.series[0].data[0].y,140+chart.series[0].data[0].y*2,350)
.css({
color: '#000',
fontSize: '16px'
})
.add();
});
Related
I am using the highchart library for making chart in my website.
Facing issue:
In semi pie chart lines are showing behind the arrow, please see screen shot.
Unable to change the colors.
Code working in js-fiddle but not in my website.
Below is the code, please review and let me know if i miss something.
Code
$(function () {
Highcharts.chart('container', {
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>2015',
align: 'center',
verticalAlign: 'top',
y: 40
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
pane: {
center: ['50%', '75%'],
size: '50%',
startAngle: -90,
endAngle: 90,
background: {
borderWidth: 0,
backgroundColor: 'none',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
yAxis: [{
lineWidth: 0,
min: 0,
max: 90,
minorTickLength: 0,
tickLength: 0,
tickWidth: 0,
labels: {
enabled: false
},
title: {
text: '', //'<div class="gaugeFooter">46% Rate</div>',
useHTML: true,
y: 80
},
/*plotBands: [{
from: 0,
to: 46,
color: 'pink',
innerRadius: '100%',
outerRadius: '0%'
},{
from: 46,
to: 90,
color: 'tan',
innerRadius: '100%',
outerRadius: '0%'
}],*/
pane: 0,
}],
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
},
gauge: {
dataLabels: {
enabled: false
},
dial: {
radius: '100%'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [{
name: 'Low',
y: 35,
color: 'Red' // Jane's color
},
{
name: 'Medium',
y: 30,
color: 'Yellow' // Jane's color
},
{
name: 'High',
y: 35,
color: 'Green' // Jane's color
}
]
},{
type: 'gauge',
data: [40],
dial: {
rearLength: 0
}
}],
});
});
Thanks in advance.
I am completely new to Highcharts and need to design a horizontal bar chart that looks exactly like the image below.
I've tried fiddling around and managed to display the 4 and 2 inside the bars. However, I'm unable to display the text 'Completed' above the first bar and the text 'To Action' below the second bar. I also want to eliminate the gap between the bars. Below is my code so far.
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
//marginLeft:120,
type:'bar'
},
legend: { enabled: false},
colors:['#173c64'],
xAxis: {
categories: ['4','2'],
labels: {
align:'left',
x:5,
style: {
fontSize: '4em',
color:'#fff'
}
},
lineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
title: {
enabled: false
}
},
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
title: {
enabled: false
}
},
title: {
margin:0,
useHTML: true,
text: "This Month",
style: {"color": "#333333", "fontSize": "1.5rem","fontWeight": "bold"}
},
series:[{
data:[{y: 20, color:'#0091dc'},{y: 17, color:'#173c64'}]
}]
});
Added the subtitle for Completed and added custom label to footer for To Action and for removing space between bars added plotOptions with
groupPadding: 0,pointPadding: 0, in chart
This is near to your requirements. Hope this helps
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
//marginLeft:120,
type: 'bar',
events: {
load: function() {
var label = this.renderer.label("To Action")
.css({
width: '100px',
fontSize: '1.5rem'
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'left',
x: 0, // offset
verticalAlign: 'bottom',
y: -30 // offset
}), null, 'spacingBox');
}
},
marginBottom: 120
},
legend: {
enabled: false
},
colors: ['#173c64'],
xAxis: {
categories: ['4', '2'],
labels: {
align: 'left',
x: 5,
style: {
fontSize: '4em',
color: '#fff'
}
},
lineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
title: {
enabled: false
}
},
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
title: {
enabled: false
}
},
plotOptions: {
bar: {
stacking: "normal",
groupPadding: 0, //add here
pointPadding: 0, //add here
}
},
title: {
margin: 0,
useHTML: true,
text: "This Month",
style: {
"color": "#333333",
"fontSize": "1.5rem",
"fontWeight": "bold"
}
},
subtitle: {
align: 'left',
y: 40, //offset
useHTML: true,
text: 'Completed',
style: {
"color": "#333333",
"fontSize": "1.5rem"
}
},
series: [{
data: [{
y: 20,
color: '#0091dc'
}, {
y: 17,
color: '#173c64'
}]
}]
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
I am using Angular Gauge from HighChart and wanted to know if it is possible to have unequal intervals. Currently, unequal intervals on the Y-axis effects the size of each plot band in the gauge.How can I have equal plot band sizes with unequal intervals on Y-axis.
Here is an example of the intervals-0-86, 86-88, 88-90, 90-96 and 96-100.
I have tried so far-
$(function() {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: 'Percentage %'
},
pane: {
center: ['50%', '85%'],
size: '130%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#EEE',
innerRadius: '80%',
outerRadius: '100%',
shape: 'arc'
}
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
// the value axis
yAxis: [{
min: 0,
max: 100,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 10,
minorTickPosition: 'outside',
minorTickColor: '#666',
tickPixelInterval: 50,
tickInterval: 6,
tickWidth: 2,
tickPosition: 'outside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 1,
distance: 20,
rotation: 'auto',
style: {
fontSize: '15px'
}
},
title: {
text: ''
},
plotBands: [{
from: 0,
to: 86,
color: '#bf0000',
innerRadius: '60%',
outerRadius: '100%'
}, {
from: 86,
to: 88,
innerRadius: '60%',
outerRadius: '100%',
color: '#fcfe00'
}, {
from: 88,
to: 90,
innerRadius: '60%',
outerRadius: '100%',
color: '#00ae50'
}, {
from: 90,
to: 96,
innerRadius: '60%',
outerRadius: '100%',
color: '#2f74b4'
}, {
from: 96,
to: 100,
innerRadius: '60%',
outerRadius: '100%',
color: '#7131a0'
}]
}],
plotOptions: {
gauge: {
dial: {
backgroundColor: "silver",
baseLength: "80%",
baseWidth: 4,
borderColor: "grey",
borderWidth: 1,
radius: "90%",
rearLength: "0",
topWidth: 1
},
pivot: {
backgroundColor: "silver",
borderColor: "grey",
borderWidth: 1,
radius: 5
},
dataLabels: {
y: 3,
style: {
fontSize: "15px"
},
borderWidth: 0,
useHTML: false
}
}
},
series: [{
name: 'Speed',
data: [90],
tooltip: {
valueSuffix: ''
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
Any help is appreciated!
Well, As per your requiremnt It seems like you want to achieve similar to this..
where min and max should updated accordingly.
Solution-
As I am understanding you want to set all value in red below 86%. correct? so why don't you change the min value of the chart. I mean while passing value to chart manipulate your input data accordingly and pass corresponding label to it.
Hoping this will help you :)
Well, High Chart doesn't provide direct method to show selected labels on the axis.
So there is alternative way to achieve this.
Below is the running code for this-
JSFiddle- https://jsfiddle.net/vikash2402/Lxoc4d8r/16/
$(function() {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: 'This is custom High Chart'
},
pane: {
center: ['50%', '85%'],
size: '130%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#EEE',
innerRadius: '80%',
outerRadius: '100%',
shape: 'arc'
}
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
// the value axis
yAxis: [{
min: 80,
max: 100,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 10,
minorTickPosition: 'outside',
minorTickColor: '#666',
tickPixelInterval: 20,
//tickInterval: 1,
tickWidth: 0,
tickPosition: 'outside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 1,
distance: 20,
rotation: 'auto',
style: {
fontSize: '14px'
}
},
title: {
text: ''
},
plotBands: [{
from: 80,
to: 86,
color: '#bf0000',
innerRadius: '60%',
outerRadius: '100%'
}, {
from: 86,
to: 88,
innerRadius: '60%',
outerRadius: '100%',
color: '#fcfe00'
}, {
from: 88,
to: 90,
innerRadius: '60%',
outerRadius: '100%',
color: '#00ae50'
}, {
from: 90,
to: 96,
innerRadius: '60%',
outerRadius: '100%',
color: '#2f74b4'
}, {
from: 96,
to: 100,
innerRadius: '60%',
outerRadius: '100%',
color: '#7131a0'
}]
}],
plotOptions: {
gauge: {
dial: {
backgroundColor: "silver",
baseLength: "80%",
baseWidth: 4,
borderColor: "grey",
borderWidth: 1,
radius: "90%",
rearLength: "0",
topWidth: 1
},
pivot: {
backgroundColor: "silver",
borderColor: "grey",
borderWidth: 1,
radius: 5
},
dataLabels: {
y: 3,
style: {
fontSize: "15px"
},
borderWidth: 0,
useHTML: false
}
}
},
series: [{
name: 'Speed',
data: [90],
tooltip: {
valueSuffix: ''
}
}]
});
try{
var DisplayLabels = [86, 88, 90, 96];
var labels = $(".highcharts-yaxis-labels > text>tspan");
labels.each(function(i, node){
if( DisplayLabels.indexOf(parseInt($(node).text())) == -1){
$(node).hide();
} else{
$(node).text($(node).text() + "%");
}
});
} catch(err){
console.dir(err);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
Hoping this will help you :)
I try to disable tooltip for gauge but no matter what I do, it doesn't work.
I tried to place:
tooltip: {
enabled: false
}
under chart, pane, series ...
Here is a demo I use: Fiddle
and this is a code:
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
tooltip: {
enabled: false
}
},
exporting: {enabled: false},
title: {
text: 'meetings',
//align: 'bottom'
verticalAlign: 'bottom',
y: 10,
style: {
fontWeight: 'bold',
fontSize:'18px'
}
},
pane: {
tooltip: {
enabled: false
},
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: {
tooltip: {
enabled: false
},
min: 0,
max: max,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 0,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 0,
tickWidth: 0,
tickPosition: 'inside',
tickLength: 0,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: '',
y: 150,
style: {
fontWeight: 'bold',
fontSize:'18px'
}
},
plotBands: [{
from: 0,
to: color_threshold_values[0],
color: '#DA2626'
}, {
from: color_threshold_values[0],
to: color_threshold_values[1],
color: '#F19E26'
}, {
from: color_threshold_values[1],
to: color_threshold_max,
color: '#88A61F'
}]
},
series: [{
name: 'Count',
data: [data.count],
dataLabels: {
enabled:false,
borderColor: 'red',
borderWidth: 0,
padding: 5,
shadow: true,
style: {
fontWeight: 'bold',
fontSize:'25px'
}
},
}]
});
Any ideas?
Try adding it to the config object itslef?
http://jsfiddle.net/hesonazx/
$('#container').highcharts({
tooltip: {
enabled: false
},
chart: {
...
});
This is based on the documentation. Notice that the toottip property for a guage type chart doesn't have an enabled option. The general tooltip property does however.
You can just add .highcharts-tooltip{opacity: 0;}
See fiddle http://jsfiddle.net/DIRTY_SMITH/dpyy732d/2/
I am trying to add padding in between my chart and plot area, as you can see in the screenshot below, the markers are overflowing across the borders of the plot area.
Is there a way for me to add padding to the bottom of the plot area, or a way to move up the chart series slightly so that it doesn't overflow?
Here is a fiddle: http://jsfiddle.net/H3Asy/5/
Here is the JS code:
$('#container').highcharts({
chart: {
type: 'areaspline',
marginLeft: 25,
plotBorderWidth: 2,
plotBackgroundColor: {
linearGradient: [0, 0, 0, 178],
stops: [
[0.5, 'rgb(255, 255, 255)'],
[1, 'rgb(221, 221, 221)']
]
},
events: {
load: function(){
this.plotBackground.attr({ rx: 15, ry: 15 });
this.plotBorder.attr({ rx: 15, ry: 15 });
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22],
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
labels: {
rotation: -90,
align: 'right',
style: {
fontSize: '12px',
fontWeight: 'bold',
fontFamily: 'Sterling, sans-serif',
color: '#999'
},
x: 5,
y: 28
}
},
yAxis: {
title: {
text: ''
},
labels: {
formatter: function() {
if(this.isFirst) {
return this.value;
}
return bytesToSize(this.value, 0, true);
},
style: {
fontSize: '12px',
fontWeight: 'bold',
fontFamily: 'Sterling, sans-serif',
color: '#999'
},
align: 'center',
x: -16,
y: 12
},
gridLineColor: 'transparent'
},
tooltip: {
shared: true,
formatter: function() {
var tooltip = $('<div>');
var total = 0;
$.each(this.points, function(i, point){
total += this.y;
tooltip.append($('<div style="color: ' + point.series.area.fill + ';">').html(point.series.name + ': ' + bytesToSize(this.y,2)));
if(!(i % 2)){
tooltip.append('<br />');
}
});
tooltip.prepend($('<div style="color: #999;">').html('Total: ' + bytesToSize(total,2) + '<br />'));
return tooltip.get(0).outerHTML;
}
},
plotOptions: {
areaspline: {
lineWidth: 1.3,
marker: {
states: {
hover: {
radius: 5
}
}
},
states: {
hover: {
lineWidth: 1.3
}
}
}
},
series: [{
name: 'Download',
fillColor: 'rgba(0, 140, 194, 0.3)',
lineColor: '#008cc2',
data: [0,4815834355,23055591595,0,0,15404821463,0,20217522975,5521887522,0,0,1371666239,2134496,0,2948406184,12384283037,8231543133,9268703354,11368292543,1747717890,4540649201,4705338812]
}, {
name: 'Upload',
fillColor: 'rgba(117, 0, 198, 0.4)',
lineColor: '#7500c6',
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
data: [0,201112067,1160271286,0,0,748962337,0,2289905587,211355292,0,0,64669389,559747,0,368939264,954704437,385646325,453112460,251406236,131414580,312915384,153890742]
}]
});
There is no perfect solution for that, but only two workarounds:
set min and startOnTick for xAxis, demo: http://jsfiddle.net/H3Asy/6/
yAxis: {
min: -1024 * 1024 * 1024,
startOnTick: false,
}
set threshold for series and startOnTick for xAxis, demo: http://jsfiddle.net/H3Asy/7/
yAxis: {
startOnTick: false
},
plotOptions: {
areaspline: {
threshold: -1
}
}