Develop Reference

Highcharts Gauge styling and adding CSS elements

I'm working on a gauge module which is intended to look as follows:
Hydration Guage
Currently, I have the following model working:
(Please refer to the fiddle for the most updated code)
GaugeFiddle
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'gauge'
},
title: {
text: 'Hydration Index'
},
pane: {
startAngle: -140,
endAngle: 140,
size: 200,
background: {
backgroundColor: {
linearGradient: [0, 300, 300, 300],
stops: [
[0, 'rgb(152, 230, 230)'],
[1, 'rgb(0, 0, 10)']
]
},
innerRadius: '70%',
outerRadius: '100%',
shape: 'arc',
}
},
yAxis: {
reversed: true,
min: 0,
max: 100,
plotBands: [{ // mark the weekend
}],
tickInterval: 600
},
plotOptions: {
gauge: {
dataLabels: {
enabled: false
},
dial: {
radius: '100%',
backgroundColor: 'black',
borderColor: 'white',
borderWidth: 0.5,
rearLength: 0,
baseWidth: 10,
topWidth: 1,
baseLength: '0%'
},
pivot: {
radius: 0
}
},
},
series: [{
name: 'Hydration percent',
data: [20],
}],
credits: {
enabled: false
},
});
});
1) How would I add those curved edges on only one side of the gauge?
2) Can I reverse the direction of the needle from clockwise to counterclockwise? Currently, I have the yaxis reversed so the graph works how it is supposed to, but it counter-intuitively starts at high and proceeds from there onward (So if my chart goes from 0-100 and my data value is 10, it would start at 100 and go to 10 by default).
3) Finally, is there any way for me to add the dynamic text that changes based on the result?

It's possible but a bit tricky - you can modify SVG's path before it's renderer by modyfying Axis.getPlotBandPath method. See a demo below.
You can simply disable initial animation and set value = 0. Then, in callback, update the point to the correct value:
series: [{
name: 'Hydration percent',
animation: false,
data: [
0
]
}],
And callback:
function(chart) { // on complete
chart.series[0].points[0].update(80);
...
}
It's not a problem using Renderer.text. For example:
chart.myLabel = chart.renderer.text('Test', 10, 10).add(); // store in some variable
Then update text:
chart.myLabel.attr({
text: 'Nice!'
});
Here is a working demo: http://jsfiddle.net/8p8ab8bg/

FLOT Chart xAxis time

I am using flot chart for charts. Please find following...
js array
data_visits = [
[new Date('06/02/2014 01:00').getTime(), 100],
[new Date('06/05/2014 10:00').getTime(), 200],
[new Date('06/10/2014 13:00').getTime(), 300],
[new Date('06/15/2014 15:00').getTime(), 400],
];
chart code
if($('#flot_overview').length) {
var chart_placeholder = $('#flot_overview');
var options = {
grid: {
clickable: true,
hoverable: true,
autoHighlight: true,
backgroundColor: null,
borderWidth: 0,
color: "#666",
labelMargin: 10,
axisMargin: 0,
mouseActiveRadius: 10,
minBorderMargin: 5
},
series: {
lines: {
show: true,
lineWidth: 2,
steps: false,
fill: true
},
points: {
show:true,
radius: 4,
symbol: "circle",
fill: true
}
},
tooltip: true,
tooltipOpts: {
content: "<span style='display:block; padding:7px;'>%x - <strong style='color:yellow;'>%y</strong></span>",
xDateFormat: "%b %d, %Y %H:%M",
shifts: {
x: 20,
y: 0
},
defaultTheme: false
},
xaxis: {
mode: "time",
minTickSize: [1, "hour"],
timeformat: '%H:%M',
labelWidth: "40"
},
yaxis: { min: 0 },
legend: {
noColumns: 0,
position: "ne"
},
colors: ["#0892cd"],
shadowSize: 0
};
$.plot(chart_placeholder,[{
label: "Click / Visits",
data: data_visits,
points: {fillColor: '#fff'},
lines: {fillColor: 'rgba(8,146,205,.2)'}
}],options);
}
It generates chart properly and shows correct time in tooltip, but it does not show correct time in xAxis as per my settings, it always show 00:00 for all xaxis if i use timeformat: '%H:%M' it works fine if i format this as date.
Please help, thanks.

Since your data spans multiple days, flot is logically placing the tick marks at the start each day. This means that with a time format of '%H:%M', you then get 0:00.
In my mind something like this makes a lot more sense for you data.

Values are setting on place in flot chart

I am trying to plot a chart in my page.Am able to set the chart values properly.But the values are not setting. Because of this am getting space at the end .
var DataSet1 = [
[new Date("2014/03/03").getTime(), 0],
[new Date("2014/03/10").getTime(), 16 ],
[new Date("2014/03/17").getTime(), 32 ],
[new Date("2014/03/24").getTime(), 189],
[new Date("2014/03/31").getTime(), 250] ];
var DataSet2 = [
[new Date("2014/03/03").getTime(), 0],
[new Date("2014/03/10").getTime(), 40],
[new Date("2014/03/17").getTime(), 20 ],
[new Date("2014/03/24").getTime(), 180],
[new Date("2014/03/31").getTime(), 230] ];
/* to find last 4 weeks mondays */
var newDate = new Date();
var day = newDate.getDay();
var date = newDate.getDate();
var xaxisArray = [];
for(var i = 0;i<5;i++){if(i!=0){
var tempnewDate = new Date(setNewDate);
setNewDate =tempnewDate.setDate(tempnewDate.getDate()-(7));
xaxisArray.push(setNewDate);
} else {
setNewDate =newDate.setDate(date-day+1);
xaxisArray.push(setNewDate);
}
}
$.plot($("#chart-revenue2"),[
{ data: DataSet1,label: "#FST",},
{ data: DataSet2, label: "SCND",
points: { show: true },
lines: { show: true,fill: false},
yaxis: 2,color:"#C76C6B"} ] ,
{
xaxis:
{
mode: "time",
min: xaxisArray[4],
max:xaxisArray[0],
timeformat: "%d/%m/%y",
ticks: xaxisArray.reverse(),
minTickSize :30
}
, yaxes: [
{
min:0, max: 400, tickSize: 50
},
{
position: "right",
min:0, max: 300, tickSize: 50
}
],
series: {
lines: {
show: true,
lineWidth: 3,
fill: true
},
shadowSize: 0,
},
grid: {backgroundColor: { colors: ["#ffffff", "#f4f4f4"] }},
colors: ["#294777"],
legend: { show: true, container: '#chart-revenue1-table' }
});
Please check my fiddle..

The problem is how you are calculating the dates for your axis ticks. When you create newDate, it has hours, minutes and seconds, which are then included in each tick. Make sure they are all zero and it will all line up:
var newDate = new Date()
newDate.setHours(0);
newDate.setMinutes(0);
newDate.setSeconds(0);
There's probably a better way to do that, I just haven't looked it up :)
See it working here: http://jsfiddle.net/ryleyb/htsBz/1/

You've set the maximum on the xaxis beyond the last point you have data for. What did you expect it to do? It doesn't have data, so it leaves it blank. If you want your axis to fit, set it's max to max: new Date("2014/03/31").getTime(), or better yet, just don't set the max and let flot autoscale it for you.

Highcharts data labels overlapping columns

I have a problem with data labels overlapping columns in my chart.
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime'
},
series: [{
data: [[Date.UTC(2013, 3, 1, 0, 0, 0), 169],
[Date.UTC(2013, 4, 1, 0, 0, 0), 176],
[Date.UTC(2013, 5, 1, 0, 0, 0), 470],
[Date.UTC(2013, 6, 1, 0, 0, 0), 346],
[Date.UTC(2013, 7, 1, 0, 0, 0), 252],
[Date.UTC(2013, 8, 1, 0, 0, 0), 138]],
dataLabels: {
enabled: true
}
}]
});
});
You can see an exmaple here: http://jsfiddle.net/J6WvR/1/
My chart should have fixed height and I don't understand why the largest column height cannot be calculated to fit its data label. How can I fix this?

According to official API documentation: overflow property
To display data labels outside the plot area, set crop to false and overflow to "none".
dataLabels: {
enabled: true,
crop: false,
overflow: 'none'
}

you can try max for yAxis,
calculate maximum value from you data and add some cushion say 100 to it and set it as max for yAxis
yAxis:{
max: 600,
},
updating your fiddle with max for yAxis at http://jsfiddle.net/J6WvR/3/
hope this will be of use for you

One option is to move the position of the labels. e.g. this will move them inside the bars:
plotOptions: {
column: {
dataLabels: {
y: 20,
color:'white'
}
}
},
http://jsfiddle.net/TBfLS/
An alternative is to manually set the max y value to make room for the label:
yAxis: {
max: 600,
endOnTick: false
},
http://jsfiddle.net/2AhVT/
Hopefully one of these options will help.
A third (and probably better) option was posted by Ivan Chau.

after enabling dataSorting highchart it is not showing data label properly in stacked column chart

HighCharts pointRange trancating width. Is this a HighCharts bug or am I missing something?

I have a HighCharts chart that combines a spline and a column. The column data defines a single Y value---indicating a single column---and uses pointRange to indicate what X value range that single column covers. Everything works fine as long as the pointRange is less than the maximum X value in the spline data. But when the pointRange is greater than the maximum X value in the spline data, HighCharts radically truncates the point range, e.g. from my desired 10,000 to about 4200, about half the maximum X value. The label also shifts radically to the left, as if the column has a significant extent for X values less than 0, which do not exist in the data I pass.
(I would like to post a snapshot of the problem, but my reputation is insufficient.)
Is this a HighCharts bug, or am I missing something here? Bayes suggests the latter of course, but I can't fine what I am missing. Hence this request to the gods of stackoverflow.
Here is a fiddle illustrating my problem: http://jsfiddle.net/Bridgeland/UVF4P/1/ If you change the pointRange from 10000 to 8000, you can see the result that I expected, albeit with slightly smaller column.
Here's my code, with much of the data omitted for brevity:
$(function () {
$('#container').highcharts({
title: {
text: 'pointRange is too small'
},
yAxis: {
min: 0,
max: 1
},
xAxis: {
min: 0
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
data: [
[0, 1],
[215, 1],
// middle of spline data omitted for brevity
[8189, 0.007198560287942413],
[8404, 0],
[8620, 0]
],
type: 'spline',
marker: {
enabled: false
},
zIndex: 1
}, {
data: [0.5],
type: 'column',
pointInterval: 10000,
pointPadding: 0.01,
groupPadding: 0,
borderWidth: 0,
shadow: false,
pointPlacement: 'between',
pointRange: 10000,
zIndex: 0,
minPointLength: 3,
dataLabels: {
enabled: true,
inside: true,
color: 'white',
formatter: function () {
return 'Misplaced'
}
}
}]
})
})
(And you might be wondering why I have a column chart with a single column? My chart generally has more columns. The single column is a pathological case for a particular combination of data. But despite the pathology, I would still like it to display properly.)

It seems that Highcharts do not permit to have a pointRange greater than the max value in x or the minRange value.
You can fix that by doing :
$(function () {
$('#container').highcharts({
title: {
text: 'pointRange is too small'
},
yAxis: {
min: 0,
max: 1
},
xAxis: {
min: 0,
minRange: 10000
//^^^^^^^^^^^
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
data: [
[0, 1],
[215, 1],
// middle of spline data omitted for brevity
[8189, 0.007198560287942413],
[8404, 0],
[8620, 0]
],
type: 'spline',
marker: {
enabled: false
},
zIndex: 1
}, {
data: [0.5],
type: 'column',
pointInterval: 10000,
pointPadding: 0.01,
groupPadding: 0,
borderWidth: 0,
shadow: false,
pointPlacement: 'between',
pointRange: 10000,
zIndex: 0,
minPointLength: 3,
dataLabels: {
enabled: true,
inside: true,
color: 'white',
formatter: function () {
return 'Misplaced'
}
}
}]
})
})
Since you set pointInterval at 10000, I think you can do the same thing with the minRange value ?

Can't you also set a xAxis max of, say, 10500? Wouldn't that allow the column to expand to 10k?