I have a gauge chart that is revered.
If i set charts { height : 300 } and { startAngle: -76,endAngle: 234 } i get a nice centered gauge.
But if i change { height : 400 } start and end get all messed up and when i change them i get wierd results ...
This is with { height : 300 }
http://jsfiddle.net/v2Tz6/2/
This is with { height : 400 }
http://jsfiddle.net/v2Tz6/3/
Can someone please explane to me what is going on and how can i fix it ?
Also the start animation is messed up.Thats not so important,i guess i can just turn it of,but it would be nice to get a fix for that too.
Thanks.
You cannot use reversed parameter and plotbands in dicreasing order.
Related
I'm doing a project using Highcharts Gantt, and I'm having a little trouble mastering it at the moment, especially the management of its height and Y axis.
Here Sandbox : https://codesandbox.io/s/nice-microservice-fuv76?file=/src/GanttMain.jsx:334-352
Let me explain:
What I want to do is set a maximum height and use scrollablePlotArea to make the y-axis scroll, while keeping the X-axis header.
The problem is: if I define a minHeight in scrollablePlotArea, the Y axis cuts the events until the minimum height defined (see sandbox), if I increase minHeight, it will cut less events, but the number is dynamic, so impossible to put a fixed value...
My question is: How to define a maximum height, while keeping a Y scroll that displays all events, While not changing the line height?
I tried several possibilities with the documentation, but nothing works...
I hope I made myself understood...
Thank you very much for your help.
This problem is a bug in Highcharts Gantt and it is similar to this issue: https://github.com/highcharts/highcharts/issues/13884
As a workaround you can dynamically set minHeight for scrollable plot area, example:
let allowChartUpdate = true;
Highcharts.ganttChart('container', {
chart: {
animation: false,
scrollablePlotArea: {
minHeight: 450
},
events: {
render: function() {
if (allowChartUpdate) {
allowChartUpdate = false;
this.update({
chart: {
scrollablePlotArea: {
minHeight: ...
}
}
});
allowChartUpdate = true;
}
}
}
},
...
});
Live demo: http://jsfiddle.net/BlackLabel/ywt2cmkn/
API Reference: https://api.highcharts.com/gantt/chart.events.render
In Highcharts, I know you can put your tooltip in a fixed position using:
tooltip: {
positioner: function () {
return { x: 50, y: 50 };
},
},
But how would I center it in the same way that margin: 0 auto would center it? I am trying to get the tooltip text to stay in the middle of a donut chart. The solution is probably something obvious but I have yet to figure out what it is. Thanks in advance!
You can make use of chart plotHeight and plotWidth to get access to current chart height and width and adjust the tooltip x and y accordingly as below:
positioner:function(){
return { x: chart.plotWidth/2, y: chart.plotHeight/2 };
}
A working demo here: https://angular-raebwk.stackblitz.io
How to keep the chart from cropping on resize, but instead just change its viewport?
I find it a a bit hard to explain, so please let me know if more explanation is needed.
The chart on the first screenshot look nice, they have a 'normal spacing between them and the bars are not cropped. This one has a 1000px width.
Chart box wide
On the second screenshot, the chart is only 300px wide, and the candlesticks become 'cropped'..
Chart box cropped
Instead I would like to only change the viewport, so that the bars are never cropped and are always te same size.. Only the date-range (Viewport) changes.. You see more bars on a wider chart, but it doesn't meen the bars itself should grow or shrink.
I tried it with simple algoritme, but its very prone to error.
let parentW = this._elementRef.nativeElement.parentNode.clientWidth,
data = this.chart.xAxis[0].series[0].data,
barW = 10,
barsToShow = Math.ceil(parentW / barW),
firstBar = (data[data.length - barsToShow] || data[0]),
lastBar = data[data.length - 1];
this.chart.xAxis[0].setExtremes(firstBar.x, lastBar.x, redraw);
I couldn't find any setting in the Highcharts doc and google didn't help much either. Many thanks
Desired behaviour can be achieved with the changing data grouping groupPixelWidth property.
When the chart has smaller width than, e.g. 300px, groupPixelWdith can be set to a higher value.
responsive: {
rules: [{
chartOptions: {
plotOptions: {
series: {
dataGrouping: {
groupPixelWidth: 30
}
}
}
},
condition: {
maxWidth: 300
}
}]
}
example: http://jsfiddle.net/b894z8ug/1/
I am using sigma.js and try to add background image instead of background color. It work find but not possible to zoom in/out. Someone already add a question here but no answer yet. So anyone have a solution of this issue?
After a simple lucky search i found the following solution:
var c = s.camera;
// Zoom out - single frame :
c.goTo({
ratio: c.ratio * c.settings('zoomingRatio')
});
// Zoom in - single frame :
c.goTo({
ratio: c.ratio / c.settings('zoomingRatio')
});
// Zoom out - animation :
sigma.misc.animation.camera(c, {
ratio: c.ratio * c.settings('zoomingRatio')
}, {
duration: 200
});
// Zoom in - animation :
sigma.misc.animation.camera(c, {
ratio: c.ratio / c.settings('zoomingRatio')
}, {
duration: 200
});
I have 2 elemenets. One is scaled down in the CSS
.firstElement{
-webkit-transform:scale(.5,.5);
}
and the other is scaled inline by jQuery's
secondElement.animate({scale:.2, origin:[0,0])}
I need to get the width and height of the secondElement and the firstElement in pixels after they are scaled down.
I tried everything, Im really not sure why I cant get this.
Anyone have any ideas?
Thanks
var matrix = window.getComputedStyle(this).webkitTransform,
data;
if (matrix != 'none') {
data = matrix.split('(')[1].split(')')[0].split(',');
} else {
data = [1,null,null,1];
}
Code Courtesy : CSS TRICKS
FIDDLE DEMO