Not able to correctly plot x-axis in HighChart - javascript

I am new to highChart and even after following the documentation I am not able to correctly plot the x-axis. It only labels the the first element of the dateAndTimeArray array.Can you please tell me where I am making mistake. Here is my code.
JSON Array
var jsonObj=[ {
name:"Nov-10 18:00",
data:[50],
type:'column'
},
{
name:"Nov-20 20:00",
data:[60],
type:'column'
},
{
name:"Nov-10 22:00",
data:[70],
type:'column'
},
{
name:"Nov-12 20:00",
data:[80],
type:'column'
}]
HighChart related code
dateAndTimeArray = ['Nov-15 18:00', 'Nov-20 20:00', 'Nov-11 22:00', 'Nov-12 20:00'];
var seriesData=jsonObj;
console.log(seriesData);
$('#container').highcharts({
chart: {
zoomType: 'xy',
spacingRight: 10
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
labels: {
overflow: 'justify'
},
startOnTick: true,
showFirstLabel: true,
endOnTick: true,
showLastLabel: true,
categories: dateAndTimeArray,
tickInterval: 00,
labels: {
formatter: function() {
return this.value.toString().substring(0, 6);
},
rotation: 0.1,
align: 'left',
step: 10,
enabled: true
},
style: {
fontSize: '8px'
}
},
yAxis: {
title: {
text: 'Measurement value'
}
},
tooltip: {
xDateFormat: '%Y-%m-%d %H:%M',
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
// threshold: null
}
},
series:jsonObj
});
DEMO

The chart is plotting what you asked it to. You have 4 series of data. Each series has one data point. I think you confusing the series.name and xAxis point. Since each of your series has just one point it is assigned to the first category in your xAxis.categories.
The question then becomes:
Do you want to have a categorical xAxis or a datetime xAxis?
Your data leads itself to categorical but your xAxis.categories don't line up with your series.name entries and your xAxis.categories are not in ascending time order. You also are setting a categorical list of items but telling highcharts that your chart is type: 'datetime'. You need to pick one.
Here is an example using categorical type.
Here is an example using datetime type.

Related

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/

how to disable highcharts animation on panning but still using on load

on highchart 8.0.0 is possible zoom using the wheel
the problem is highcharts do an animation on scroll
I red the documentation but I only found disable all animations
is it posible do that?
$('#container').highcharts({
chart: {
panning: true
},
mapNavigation: {
enabled: true,
enableButtons: true
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
here is in jsfiddle
https://jsfiddle.net/xm3692y8/2/
thanks in advance
best
I think that set chart.animation to false is a solution which you are looking for. It will disable animation for all chart updating, but the initial one will stay unchanged.
Demo: https://jsfiddle.net/BlackLabel/jLm8yrt6/
chart: {
panning: true,
animation: false
},
API: https://api.highcharts.com/highcharts/chart.animation
Is that what you had in mind?

HighCharts yAxis too much space around big numbers

My current chart
Just started using HighCharts. I'm charting a stock price that fluctautes around $1,598 and $1,601 that fluctuates over the course of a day. The changes are all obviously small - but the price is changing - it should not be a straight line. HighCharts seems to just zoom too far out. I've added the startOnTick: false etc. with no luck so far. Is there anything obvious I might be missing?
Options below:
const options = {
chart: {
height: '150px',
backgroundColor: theme.colors.white02
margin: 0,
spacing: [0, 0, 0, 0]
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
endOnTick: false,
type: 'datetime',
gridLineWidth: 1,
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
minPadding: 10,
maxPadding: 0
},
title: {
text: null
},
legend: {
enabled: false
},
series: [
{
type: 'areaspline',
data: data[0].data,
}
]
};
If you set the min option for the y-Axis to a number just below your minimum - in your case perhaps 1595, and have startOnTick to false as you've mentioned, that will essentially 'zoom in' on the graph right away for your desired range given the inputs are within that range.
Try to set min value of yAxis.
const options = {
chart: {
height: '150px',
backgroundColor: theme.colors.white02
margin: 0,
spacing: [0, 0, 0, 0]
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
endOnTick: false,
type: 'datetime',
gridLineWidth: 1,
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
minPadding: 10,
maxPadding: 0,
min: 1550
},
title: {
text: null
},
legend: {
enabled: false
},
series: [
{
type: 'areaspline',
data: data[0].data,
}
]
};
options.yAxis.min=1550;
or you can assign minimal value from response array.

Empty space above plot lines in Highcharts

I am using Highcharts (Highstock) to render a chart on my page.
I am specifying a max and min value for my axis, but despite this I end up with blank space above my graph:
This is what my options look like currently:
var myChart = new Highcharts.Chart('container', {
rangeSelector:{
enabled: false
},
credits: {
enabled: false
},
legend: {
enabled: true,
},
yAxis: [{
opposite: false,
title: {
text: 'Gravity'
},
min: 1,
max: items.options.gravity_max + 0.01
},
{
opposite: true,
title: {
text: 'Temperature (C)'
},
min: items.options.temperature_min - 1,
max: items.options.temperature_max + 1
}],
navigator: {
enabled: false,
},
scrollbar: {
enabled: false
},
series: [{
name: 'Temperature',
data: items.temperature,
dataGrouping: {
enabled: true
},
yAxis: 1,
}, {
name: 'Gravity',
data: items.specific_gravity,
dataGrouping: {
enabled: true
}
},
{
name: 'OG',
data: items.original_gravity,
dataGrouping: {
enabled: true
},
dashStyle: 'dot',
color: '#000'
},
{
name: 'FG',
data: items.final_gravity,
dataGrouping: {
enabled: true
},
dashStyle: 'dot',
color: '#000'
}]
});
Here is a link to a fiddle with a simplified version of the data; http://jsfiddle.net/3eLrn61w/
What is causing that blank space above, and how do I get rid of it?
This is because Highcharts by default will try to start and end an axis on a label. Your current max is 1.071+0.01 (1.081). This is more than the label checkpoint of 1.075, which causes another label to be made.
You can fix this by doing (JSFiddle example):
yAxis: [{
// ...
endOnTick: false
}]
A few other options you might want to evaluate is the matching axis.startOnTick: false, possibly axis.maxPadding: 0 to avoid creating labels that are marginally needed and chart.alignTicks: false to free up the connection between the axis.
An alternative approach will also be to alter the tick positions (axis.tickPositions or axis.tickPositioner) so that they line up better with your min and max values.
Or your third option is to alter your handcoded maximum of the axis (max: items.options.gravity_max + 0.01), so that it does not create such a label gap, f.x. by being max: 1.074.
However, I think your best bet may be with the startOnTick and endOnTick options.

Ugly Highchart when using letter label for both xaxis and yaxis

I am trying to make the chart with both text label on xAxis and yAxis like this
Example
I am able to make it by this configuration
$(function() {
var chart = Highcharts.chart('chart-container', {
chart: {
type: 'bar',
},
title: {
text: '',
floating: true
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y:.2f}</b><br/>'
},
xAxis: {
gridLineColor: '#7F7F7F',
lineColor: '#7F7F7F',
gridLineWidth: 1,
tickLength: 0,
labels: {
align: 'left',
reserveSpace: true
},
categories: ['1. - 4. trinn (frivillige øvelser)', '1. - 4. trinn (obligatorisk ferdighetsprøve)', '5. - 7. trinn (frivillige øvelser)', '8. - 10. trinn (frivillige øvelser)']
},
yAxis: {
min: 31.83333,
max: 100,
title: {
text: null
},
gridLineWidth: 1,
tickLength: 0,
gridLineColor: '#7F7F7F',
lineColor: '#7F7F7F',
categories: {
'33.33333': 'Må øve mer',
'66.66667': 'På god vei',
'100': 'Kan'
},
tickPositions: [0, 33.33333, 66.66667, 100],
plotBands: [{
from: 31.83333,
to: 33.33333,
color: '#CC3333'
}, {
from: 65.16667,
to: 66.66667,
color: '#F2BA38'
}, {
from: 33.33333,
to: 34.83333,
color: '#CC3333'
}, {
from: 66.66667,
to: 68.16667,
color: '#F2BA38'
}, {
from: 97,
to: 100,
color: '#77B800'
}]
},
plotOptions: {
series: {
pointPadding: 0,
borderWidth: 0
}
},
series: [{
name: '',
color: '#646464',
borderColor: '#464646',
borderWidth: 1,
data: [0, 66.6666666666667, 0, 0]
}]
})
});
https://jsfiddle.net/ngoclamnn/nu2fwzrn/
But you can see that it has a little bit "weird" at the 0 values, maybe it is a bug on Highchart?
Do you have another way to solve this?
Using this answer I was able to find a solution. Create yAxis categories as a variable and use the same function the answer uses to insert them, that is:
var categories = {0: '', 33.33333: 'Må øve mer', 66.66667: 'På god vei', 100: 'Kan'}
And then in the chart:
yAxis: {
labels: {
enabled: true,
formatter: function() {
return categories[this.value];
}
},
tickInterval: 1,
minPadding: 0,
maxPadding: 0,
startOnTick: true,
endOnTick: true,
...
}
Working example: https://jsfiddle.net/nu2fwzrn/73/
Make sure to upvote the original answer.

Categories