Develop Reference

How to make Tick lines around Solid Gauge in Highcharts

I am working on highcharts and so much dependency on it so i cant use other plugins
$(function () {
var gaugeOptions = {
'chart': {
'type': 'solidgauge'
},
'title': null,
'tooltip': {
'enabled': false
},
'pane': {
'center': ['50%', '50%'],
'size': '100px',
'startAngle': 0,
'endAngle': 360,
'background': {
'backgroundColor': '#EEE',
'innerRadius': '90%',
'outerRadius': '100%',
'borderWidth': 0
}
},
'yAxis': {
'min': 0,
'max': 100,
'labels': {
'enabled': false
},
'lineWidth': 0,
'minorTickInterval': null,
'tickPixelInterval': 400,
'tickWidth': 0
},
'plotOptions': {
'solidgauge': {
'innerRadius': '90%'
}
},
'series': [{
'name': 'Speed',
'data': [50],
'dataLabels': {
'enabled': true,
useHTML: true,
format: '<div ><span style="font-size:15px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span>' +
'<span style="font-size:08px;color:Black">%</span> <br/><br/></div>',
borderWidth: 0
}
}]
};
debugger;
$('#Chart2').highcharts(gaugeOptions);
});
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '50%'],
size: '40%',
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: {
enabled: false
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -20,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
$('#sampleChart').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [80],
dataLabels: {
format: '<div ><span style="font-size:15px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span>' +
'<span style="font-size:12px;color:Black">%</span></div>',
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
});
http://jsfiddle.net/mmhukqtz/
this is my chart which i am using i want to give ticks on upper side of circle like this
And Also like this
Thankx For Help

You need to define a seperate pane and axis and set axis offset property to positive value - for the ticks outside the pane - or to negative value - for the ticks inside the pane.
Pane config:
pane: [{
size: '40%',
center: ['50%', '50%'],
background: {
innerRadius: '60%',
outerRadius: '100%'
}
}, {
size: '40%',
background: null
}]
Axis config:
yAxis: [{
min: 0,
max: 200,
tickWidth: 0,
minorTickInterval: null,
labels: {
enabled: false
},
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
]
}, {
linkedTo: 0,
pane: 1,
offset: 20, // offset property controls the distance from the pane
tickInterval: 10,
minorTickInterval: null,
lineWidth: 0,
labels: {
enabled: false
}
}],
Ticks are outside: http://jsfiddle.net/key8v7mn/
Ticks are inside: http://jsfiddle.net/key8v7mn/1/

Try this code in your yAxis:
tickLength: 5,
tickWidth: 4,
tickColor: 'black',
tickPosition: 'outside',
minorTickLength: 0,
tickInterval: 1,
tickInterval does the job.
Updated fiddle:
http://jsfiddle.net/jb242m6o/
tickPosition: "inside" means you will get ticks inside
tickPosition: "outside" means you will get ticks outside

Highcharts horizontal bar chart with text inside bars

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>

How can I remove the extra space around my Highcharts scatter plot?

I'm trying to build an NBA shot chart generator using Highcharts. So far I've managed to gather the data and plot it, but I'm unable to overlay a court diagram over the chart to finish the job because of the extra space at the right and bottom of the chart.
Here's an Imgur gallery demonstrating what I have now and what I'm trying to achieve.
This is the code I'm using to generate the charts:
var drawChart = function(made, missed) {
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
width: 500,
height: 470
},
title: {
text: ""
},
xAxis: {
title: {
enabled: false
},
lineWidth: 0,
gridLineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
},
yAxis: {
title: {
enabled: false
},
lineWidth: 0,
gridLineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 250,
y: 400,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
credits: {
enabled: false
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} ft, {point.y} ft'
}
}
},
series: [{
name: "Made",
color: 'rgba(223, 83, 83, .5)',
data: made
}, {
name: "Missed",
color: 'rgba(119, 152, 191, .5)',
data: missed
}
]
});
});
}
I've tried fiddling with various spacing and margin options but haven't had any luck.
Thanks.

How to disable tooltip in highcharts gauge?

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/

High chart (spark line) displaying "Created with High charts 4.0.1 No data to display" instead of display graph?

High chart (spark line) displaying Created with High charts 4.0.1 No data to display instead of display graph?
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
min: 0,
title: {
text: ''
},
categories: ['a','b','c']
},
yAxis: [{
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
title: {
text: ''
},
labels:
{
enabled: false
}
},
{
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
title: {
text: ''
},
labels:
{
enabled: false
}
}],
series: [{
name: ' ',
yAxis: 1,
type: 'spline',
data: [1,2,3],
pointStart: 0
},
{
name: ' ',
yAxis: 1,
type: 'spline',
data: [4,5,6],
pointStart: 0
}],
legend: {
enabled: false,
width: 100,
floating: true,
align: 'left',
x: 0, // = marginLeft - default spacingLeft
itemWidth: 60
},
chart: {
height: 30,
width: 100,
marginBottom: 10
},
tooltip: {
positioner: function () {
return { x: -180, y: -25 };
},
shape: "square",
backgroundColor: '#FCE9CE',
borderWidth: 1,
borderColor: '#F90',
formatter: function () {
var bpValue = [];
var serviceDate;
$.each(this.points, function (i, point) {
bpValue.push('<span>' + point.y + '</span>');
serviceDate = point.x;
});
var content = "<span><b>Service:</b>" + serviceDate
+ "</span><br /><span><b>BP Value :</b></span>";
bpValue = bpValue.join('/');
return content + bpValue;
},
shared: true
}
Sometimes It is not displaying any line or dot. instead of that simply showing alternate text that is Created with Highcharts 4.0.1. What would be the issue? how can resolve this?