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
Related
I am very new to Highcharts. I am trying to use the solid gauge. The problem is that the percentage text is not present in the center. Is there anyway to put the percentage in the center of the chart?
Here is the code:
$(function () {
Highcharts.chart('container', {
chart: {
type: 'solidgauge'
},
title: {
text: ''
},
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, labelHeight) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: {
center: ['50%', '27%'],
startAngle: 0,
endAngle: 360,
background: [{ // 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,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: '34px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: [{
name: 'Stand',
borderColor: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}]
}]
},
});
The x and y in the label option can set the position but I want it to be dynamic.
Secondly I want it to be always shown. Here is the result of the code above.
Am plotting array directly to series of my high chart.I need to show vertical lines in x-axis and horizontal bands in y axis as different colors.
Need to add vertical lines and horizontal bars according to values displayed in chart.
Here is my code:
$('#container').highcharts({
title: {
text: 'Graph',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
credits: {
enabled: false
},
colors: ['red'],
xAxis: {
// categories: [],
title: {
text: 'Time'
},
},
yAxis: {
title: {
text: 'Rate'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Heart Rate',
data: data_arr
}]
});
For that, you can use chart.xAxis[0].categories.length to access the length of xAxis, and chart.xAxis[0].categories[] to access the values of xAxis' elements.
Check the following example:
$(function() {
$('#container').highcharts({
xAxis: {
categories: [10, 20, 30, 40, 50, 60, 70]
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]
}]
});
// the button action
var hasPlotLine = false,
$button = $('#button'),
chart = $('#container').highcharts();
$button.click(function() {
for (i = 1; i < chart.xAxis[0].categories.length; i++) {
if (chart.xAxis[0].categories[i] > 30) {
chart.xAxis[0].addPlotLine({
value: i,
color: 'red',
width: 2,
id: 'plot-line-1'
});
}
}
});
});
To set up vertical/horizontal lines/Bands use plotBands or/and plotLines options:
For lines:
plotLines: [{
color: '#FF0000',
width: 2,
value: 5.5
}]
For Band
plotBands: [{ // mark the weekend
color: '#FCFFC5',
from: Date.UTC(2010, 0, 2),
to: Date.UTC(2010, 0, 4)
}],
You can read more here:
http://api.highcharts.com/highcharts#xAxis.plotBands
http://api.highcharts.com/highcharts#xAxis.plotLines
Check the following example jsfiddle
$(function() {
$('#container').highcharts({
title: {
text: 'Graph',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
credits: {
enabled: false
},
colors: ['red'],
xAxis: {
// categories: [],
title: {
text: 'Time'
},
plotLines: [{
color: 'blue',
width: 1,
value: 1,
dashStyle: 'longdashdot',
zIndex: 3
}, {
color: 'blue',
width: 1,
value: 2,
dashStyle: 'longdashdot',
zIndex: 3
}, {
color: 'blue',
width: 1,
value: 3,
dashStyle: 'longdashdot',
zIndex: 3
}],
zIndex: 3,
},
yAxis: {
title: {
text: 'Rate'
},
plotBands: [{ // mark the weekend
color: '#BEE9B4',
from: 1,
to: 4
}, { // mark the weekend
color: '#EB813B',
from: 4,
to: 6
}, { // mark the weekend
color: '#E93A0F',
from: 6,
to: 8
}],
zIndex: 2,
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
type: 'spline',
name: 'Heart Rate',
data: [4, 5, 1, 2, 8, 7, 4, 1]
}]
});
});
I wanted to remove intermediate number that are appeared on solid gauge chart.
e.g. I want to hide 100 from chart given in link.
Solid gauge chart
Here is my code of chart.
function myfun(data) {
var gaugeOptions = {
chart: {
renderTo: 'mydiv',
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (window.Highcharts.theme && window.Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.0, '#DF5353'], // red
[0.5, '#DF5353'],
[0.51, '#DDDF0D'],
[0.79, '#DDDF0D'], // yellow
[0.8, '#55BF3B'],
[1, '#55BF3B'] // green
],
lineWidth: 0,
minTickInterval: 100,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -110
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
$('#mydiv')
.highcharts(
window.Highcharts
.merge(
gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: ''
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [totalHealthScore],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((window.Highcharts
.theme && window.Highcharts.theme.contrastTextColor) || 'black') +
'">{y}</span><br/>' + '<span style="font-size:12px;color:silver">Score</span></div>'
},
tooltip: {
valueSuffix: ' Score'
}
}]
}));
}
How do I hide values 2.5 and 100 from charts given in the link??
You can affect the position of the ticks using tickInterval and startOnTick, e.g.
yAxis: {
tickInterval:200,
startOnTick:true,
http://jsfiddle.net/DdAr6/
http://api.highcharts.com/highcharts#yAxis.tickInterval
The number of steps need to be defined for the y axis.
In the speedometer's code:
yAxis: {
min: 0,
max: 200,
labels: {step:2},
title: {
text: 'Speed'
}
}
In the tachometer's code:
yAxis: {
min: 0,
max: 5,
labels: {step:2},
title: {
text: 'RPM'
}
}
See http://jsfiddle.net/y62sj/ for the full code.
I've written dozens of these charts and have never had this problem. My y-axis labels aren't showing up in this particular chart:
$(function () {
$('#container').highcharts({
chart: {
alignTicks: false,
animation: {
animation: false
},
height: 180,
reflow: true,
width: 425,
zoomType: 'x'
},
credits: {
enabled: false
},
legend: {
enabled: false,
layout: 'horizontal'
},
plotOptions: {
line: {
animation: false,
marker: {
radius: 0
},
stickyTracking: false,
turboThreshold: 5000000,
zIndex: 1
},
spline: {
animation: false,
marker: {
radius: 0
},
turboThreshold: 5000
}
},
title: {
text: ''
},
tooltip: {
backgroundColor: '#303030',
borderColor: 'white',
borderRadius: 0,
borderWidth: 1,
style: {
font: '20pt [FontFamily: Name=Microsoft Sans Serif]',
padding: '10px',
color: 'white'
},
valueDecimals: 0,
valueSuffix: 'F'
},
xAxis: {
categories: ['Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'],
lineColor: 'black',
lineWidth: 2
},
yAxis: {
endOnTick: false,
gridLineWidth: 0,
lineWidth: 2,
maxPadding: 0,
minPadding: 0,
startOnTick: false,
id: 'ForecastData',
lineColor: 'black',
linkedTo: 0,
offset: 0,
title: {
text: ''
},
type: "linear"
},
exporting: {
buttons: {
exportButton: {
enabled: false
},
printButton: {
enabled: false
}
},
enabled: false
},
series: [{
data: [33, 31, 35, 33, 36, 37, 36],
labelText: 'Daily Min Temperature',
name: 'Daily Min Temperature',
type: 'spline',
color: '#2177E0'
}]
});
});
http://jsfiddle.net/5QBzv/
I can't seem to figure out what I'm missing. Any ideas?
Thanks!
Try replacing your x and y axis with this
xAxis: {
categories: ['Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'],
lineColor: 'black',
lineWidth: 2
},
yAxis: {
title: {
text: 'DATA'
},
lineColor: 'black',
lineWidth: 2
categories: ['1', '2', '3', '4', '5', '6', '7'],
},
Or remove the linkedTo from your code.
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
}