I have an area chart with three series x-axis is 'datetype', when there is only data in each series the labels on x and y axis appears as expected but the plot point is missing. Can't expect a filled area for one data but even the plot point is missing.
'minRange' property is set and so the label is showing the date from the data.
Is this expected or there is a property that needs to be set to see the plot points.
fiddle link here http://jsfiddle.net/bM9j9/6/
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Area chart'
},
xAxis: {
type: 'datetime',
minRange: 864e5
},
yAxis: {
min: 0
//tickInterval: 0.5,
//minRange: 0.5
},
credits: {
enabled: false
},
plotOptions: {
area: {
stacking: 'normal',
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'Open',
data: [
[Date.UTC(2010, 0, 3), 120]
]
}, {
name: 'Closed',
data: [
[Date.UTC(2010, 0, 3), 60]
]
}, {
name: 'Accepted',
data: [
[Date.UTC(2010, 0, 3), 89]
]
}]
});
});
actually the data is rendered, But you cannot see it because the marker radius of the point is 0 in normal sate but it will be visible when your mouse hovers on it.
this is happening because you have disabled marker and have enabled hover for it.
To get the points visible turn them on.
plotOption: {
area:{
marker: {
enabled: true,
-----continue with other properties----
}
}
}
updated your fiddle here: http://jsfiddle.net/bM9j9/7/
Hope this will help you.
Related
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?
How to show dynamic text on x-axis based on transition. In my first case, I am getting two transitions(football -> basketball & basketball -> Gerard) so I will be showing two labels just like below
But When we get only one transition so how to handle label on the x-axis. What I need is when only one transition is there one label should only come. In the below case Semi-Final label should come.
Highcharts.chart('container', {
chart: {
showAxes: true
},
title: {
text: ''
},
xAxis: {
type: "category",
categories: ['Semi-Final','Final Phase'],
max: 2,
labels: {
x: 10,
y: 30,
},
lineColor: 'transparent',
tickLength: 0
},
yAxis: {
visible: false
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['Football', 'Cricket', 20 ],
],
type: 'sankey',
}]
});
The number of displayed labels depends on axis extremes. You can make max property dependent on the number of data:
events: {
load: function() {
var max = this.series[0].nodeColumns.length - 2;
this.xAxis[0].update({
max: max
})
}
}
Live demo: https://jsfiddle.net/BlackLabel/7s5h41qr/
API: https://api.highcharts.com/highcharts/xAxis.max
I have a simple line chart with highchart ng the problem is that I cannot set the threshold to zero the threshold property according to the highcharts api should be plotoption.series.threshold also according to this answer it should be under plotoptions but as you can see in my jsfiddle it seems not to work for me. what I want here to do is to move the x-axis to the point 0 where all the negative values show after the x-axis
code:
$scope.highchartsNG = {
options: {
chart: {
type: 'line'
},
plotOptions: {
line: {
},
series: {
threshold: 3
}
}
},
series: [{
data: [10, 15, 12, 8, -7]
}],
title: {
text: 'Hello'
},
loading: false
}
You cannot do with plot Options see here
plotOptions: {
series: {
threshold:0,
negativeColor: 'green'
}
},
Example
You can try using plotLines for x-axis,
yAxis: {
title: {
text: 'dBmV'
},
plotLines: [{
value: 0,
width: 2,
color: 'green'
}]
},
DEMO
http://jsfiddle.net/leongaban/0zuxtdcg/
I could not find a "Drag zoom" type event in the HighChart docs that would tell me that the user has finished zooming into a specific range on the chart, then give me the new min and max values.
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
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
}]
});
});
});
The zoom effects the extremes of the axis. You can use the setExtremes or afterSetExtremes events of the axis to catch this.
For example (JSFiddle):
xAxis: {
events: {
setExtremes: function(e) {
alert("Min: "+e.min+"\n"
+"Max: "+e.max);
}
}
}
The e object contains the min and max, while this in the function is the Axis object (which also has min and max). The minor difference between the two events is described in the API as:
afterSetExtremes ... As opposed to the setExtremes event, this event fires after the final min and max values are computed and corrected for minRange.
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.