We Keep Coding

Is it possible to show text on top of an Arearange chart

Highcharts.chart('container', {
chart: {
type: 'arearange',
zoomType: 'x',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
//type: 'datetime',
accessibility: {
rangeDescription: 'Range: Jan 1st 2017 to Dec 31 2017.'
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled:true
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
//stacking: 'normal',
borderColor: '#303030',
color : '#cac9c9',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#303030'
}
},
dataLabels: {
useHTML: true,
enabled: true,
inside: true,
align:'left',
allowDecimals: true,
formatter: function(){
return "SOME_TEXT_INSIDE_HTML_TAG";
}
},
},
series: [{
data: [
[0, 10],
[0, 10],
],
borderColor: 'black',
borderWidth: 0.2,
},
{
data: [
[20, 40],
[20, 40],
]
}]
});
Above is the code for an Area range chart. Couple of questions.
I just want to show some random text on top of each area. I tried with dataLabels but I doesn't seem to work. Isn't it possible to do so?
Yaxis seems to be shown in AreaRange chart when mouse is hovered over the chart. Can it be set to be displayed by default?
Any help would be much appreciated. Thanks in advance.

I tried to reproduce your code and here is an output: https://jsfiddle.net/BlackLabel/uqmyjsr9/
The dataLabels config needs to be nested in the series object.
plotOptions: {
series: {
//stacking: 'normal',
borderColor: '#303030',
color: '#cac9c9',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#303030'
},
dataLabels: {
useHTML: true,
enabled: true,
inside: true,
align: 'left',
allowDecimals: true,
formatter: function() {
return "SOME_TEXT_INSIDE_HTML_TAG";
}
},
},
},
I am not sure here - the yAxis is displayed all the time, not only after hovering over the chart.

high charts starting new line from each point

I am using high charts to show energy data but i think due to some negative value high caharts starting a new line from each new point and lines not have any connection between them.
here is the picture of my results.
problem Image
you can see in the image there should be only one line.
here's my data for this.
I have 4 series's to show in graph but here i am only providing one because each line have same issue
var data={'vt':[[1588273200000, 0],[1586372400000, 245],[1586286000000, 200],[1586199600000, 7],[1586113200000, 4],[1586026800000, 1],[1585940400000, 4],[1588186800000, 40],[1585854000000, 7],[1588100400000, 30],[1588014000000, 155],[1587927600000, 38],[1587841200000, 57],[1587754800000, 35],[1587668400000, 66],[1587582000000, 68],[1587495600000, 35],[1587409200000, 40],[1587322800000, 62],[1585767600000, 8],[1587236400000, 37],[1587150000000, 44],[1587063600000, 72],[1586977200000, 13],[1586890800000, 5],[1586804400000, 58],[1586718000000, 90],[1586631600000, 41],[1586545200000, 186],[1586458800000, -498]]};
and here's how i initialize the highcharts object.
$('#'+id).highcharts({
title: {
text: titletext
},
time: {
timezone: 'Asia/Karachi'
},
chart: {
zoomType: 'x',
title: 'Meter 1'
},
xAxis: {
labels: {
formatter:function(){
return Highcharts.dateFormat("%b %e", this.value);
}
},
title: {
text: 'Date'
},
showLastLabel: true,
tickmarkPlacement: 'on',
tickPosition: 'inside',
tickWidth: 0,
tickPixelInterval: 60,
lineWidth: 2,
lineColor: 'rgba(255,205,255,0.6)',
minPadding: 0,
gridLineWidth: 0,
offset: 20,
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
endOnTick: true,
},
yAxis: {
gridLineColor: 'black',
gridLineWidth: 0,
title: {
enabled: true,
text: cap
},
labels: {
enabled: true
}
},
tooltip: {
backgroundColor: 'white',
borderColor: 'black',
shadow: true,
style: {
color: 'black',
fontSize: '12px',
padding: '8px'
},
enabled: true,
crosshairs: false,
shared: false,
snap: 30,
},
plotOptions: {
flags: {
shape: 'squarepin'
}
},
series: [
{
name: 'Total kwh',
data: data.vt
},
{
name: 'Day kwh',
data: data.dt
},
{
name: 'Peak kwh',
data: data.pt
},
{
name: 'Off Peak kwh',
data: data.opt
}
],
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
navigation: {
enabled: true
},
adjustChartSize: true,
},
exporting: {
filename: titletext+'_'+"<?php echo $_SESSION['username']; ?>"+'_'+todayDate(),
buttons: {
contextButton: {
menuItems: ["viewFullscreen",
"separator",
"downloadJPEG",
"separator",
"downloadXLS",
]
}
}
},
credits: {
enabled: false
}
}
)

You need to provide an external graph value for z-index which will identify its position
Please go through this fiddle link with ur dataset. I have improved ur code.
So you can review it.
https://jsfiddle.net/vishalanand77/f6dnua28/32

You have unsorted data - Highcharts error #15: https://www.highcharts.com/errors/15/
You can sort it in this way:
data.vt.sort(function(a, b) {
return a[0] - b[0];
});
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4993/

Why my label are not at the same height

My question is about a column chart i making..
I don't understand why my label are not set on the height..
I try many things but i really don't know..
Here you can find a example :jsfiddle project
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
height: 200
},
title: {
text: 'Monthly Average Rainfall'
},
xAxis: {
offset: 0,
labels: {
useHTML: true,
rotation: 0
},
tickmarkPlacement: 'on',
gridLineWidth: 0,
lineWidth: 0,
tickPosition: 'outside'
},
yAxis: {
gridLineWidth: 0,
plotLines: [{
color: '#DDDDDD',
width: 1,
value: 0
}],
max: 0.92,
labels: {
enabled: false
},
title: {
text: ''
}
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'black',
verticalAlign: 'top',
useHTML: true,
y: -20
}
},
},
series: [{
showInLegend: false,
negativeColor: '#F14646',
color: '#00B76C',
pointWidth: 40,
data: [0.01, 0.03, 0.03, 0.05, 0.03, 0.10, 0.11, 0.11, 0.15, 0.92]
}]
})
});
});
Thank you!!

It seems that plotOptions.column.stacking = 'normal' and plotOptions.column.y: -20 are causing most of the trouble. So, firstly you should set plotOptions.column.y: 0 (or remove it). Secondly, you could do one of the following
remove plotOptions.column.stacking entirely if you do not actually need it
some column labels may still be shown inside the bar instead of above, this is because there is not enough space above the column - one option is to set yAxis.max to a large enough value to guarantee space
if you do need stacking, use yAxis.stackLabels.enabled: true instead (and remove plotOptions.column.dataLabels if they interfere)
See the relevant Highcharts yAxis.stackLabels option documentation and their stacked column chart example.

HighCharts: How to put the xAxis category text inside the chart

I'm working with Highcharts and I'm not being able to accomplish something. Here is what I want:
As you can see, the text for each bar is on top of the bar.
Here is the version that I've been working on:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'APPROVED SPEND TO DATE FOR FISCAL YEAR 2013: $17,360,612'
},
xAxis: {
categories: ['Intellectual Property', 'Antitrust/Competition'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Approved spend',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' dollars'
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 2013',
data: [6000123, 3743653]
}]
});
});
JSFiddle: http://jsfiddle.net/WcKvz/1/
As you can see, I'm only having the text in the left side of the bar and I can't get it right.
Any ideas? Thank you

The only way I've seen this work is with stackedLabels. You can use them even if you aren't using stacked bars since you only have one series.
...
plotOptions: {
bar: {
stacking: 'normal'
}
},
yAxis: {
stackLabels: {
formatter: function() {
return this.axis.chart.xAxis[0].categories[this.x] + ': $' + this.total;
},
enabled: true,
verticalAlign: 'top',
align: 'left',
y: -5
},
...
http://jsfiddle.net/NVypa/

Highchart crashing with multiple Y axis

My highchart crashes chrome, when i add the 2nd serie.
Cannot see Chrome console to debug.. :(
Does anyone have an idea?
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
margin: [40,10,60,80],
},
title: {
text: 'Temperature Today'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%H:%M'
},
tickInterval: 3600 * 1000,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
},
},
yAxis: {
title: {
text: 'Temperature'
},
minorGridLineWidth: 0,
/* gridLineWidth: 0, */
/* alternateGridColor: null */
},
tooltip: {
formatter: function() {
return ''+
Highcharts.dateFormat('%H:%M', this.x) +': '+ this.y;
}
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 3
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 3,
lineWidth: 1
}
}
},
}
},
series: [{
name: 'Temperature',
data: temp,
type: 'line',
showInLegend: false,
pointInterval: 60 * 1000,
pointStart: Date.UTC(2006, 0, 1),
marker: {
enabled: false
},
dashStyle: 'solid',
yAxis: 0,
xAxis: 0,
} , {
name: 'Humdity',
data: hum,
yAxis: 1,
xAxis: 0,
showInLegend: false,
type: 'line',
}],
navigation: {
menuItemStyle: {
fontSize: '6px'
}
}
});
});
});

You only have one yAxis, so it breaks because you set the second serie to display into the second one( yes, that's what yAxis: 1 means ).
Remove it or create the second yAxis.
Update:
Use yAxis: 0 the reffer the first and 1 to the second.
Missing , after } on line 36 of jsfiddle.
Store data before.
Demo