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?
Related
I am using extjs and highcharts to develop a wind rose chart. I need to display the data as trapezoids with straight edges, rather than the default display of the segments with arcs as delimiters. Here is an image of what I am trying to do
I have been able to integrate the highcharts object into my application using the wrapper provided by JoeKuan
However I am not seeing in the highcharts documentation how I can configure the polar chart columns into straight edged segments as seen in the image..
Here is a fiddle of the polar chart as it works currently.. Fiddle
Highcharts.chart('container', {
data: {
table: 'freq',
startRow: 1,
endRow: 17,
endColumn: 7
},
chart: {
polar: true,
type: 'column'
},
title: {
text: 'Wind rose for South Shore Met Station, Oregon'
},
subtitle: {
text: 'Source: or.water.usgs.gov'
},
pane: {
size: '85%'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 100,
layout: 'vertical'
},
xAxis: {
tickmarkPlacement: 'on'
},
yAxis: {
min: 0,
endOnTick: false,
showLastLabel: true,
title: {
text: 'Frequency (%)'
},
labels: {
formatter: function () {
return this.value + '%';
}
},
reversedStacks: false
},
tooltip: {
valueSuffix: '%'
},
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPlacement: 'on'
}
}
});
All help greatly appreciated
Lisa
You want type: 'area' to achieve that visualization.
Highcharts.chart('container', {
data: {
table: 'freq',
startRow: 1,
endRow: 17,
endColumn: 7
},
chart: {
polar: true,
type: 'area'
},
http://jsfiddle.net/0mb1s1jd/1/
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.
When the graph redraws (zoom or resize), the Y axis values change (the max value changes) leaving a big white gap on the top of the graph (no data).
Here's a JsFiddle of the problem (with both real and fake data, same result) and some pictures of my actual graph.
These are my options for that chart :
var chartOptions = {
title: false,
xAxis: {
lineWidth: 0,
type: 'datetime'
},
yAxis: [{
lineWidth: 0,
},
{
lineWidth: 0,
opposite: true,
}],
tooltip: {
shared: true
},
series: [{
name: 'A',
yAxis: 0,
type : "area",
},
{
name: 'B',
yAxis: 1,
type : "area",
},
{
name: 'C',
type : "spline",
yAxis: 0,
}],
plotOptions: {
area: {
threshold: null
},
},
chart: {
zoomType: 'x',
},
legend: {
enabled: false
},
};
You can set alignTicks as false. Example: http://jsfiddle.net/b1vrvn2q/9
chart: {
zoomType: 'x',
alignTicks:false
},
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.