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
Consider the following jsfiddle
I am trying to align the gap between title bottom-border and the chart. Preferably the left side and right side of the chart aligns with the left side and right side of title border respectively.
Is there anyway I can do that without hardcoding (my chart width changes relative to screen size)?
You can force the title to have the same width and left offset as the plot area. To make sure it's responsive use the render event:
chart: {
plotBorderWidth: 1,
events: {
render: function() {
var style = this.title.element.style;
style.left = this.plotLeft + 'px';
style.width = this.plotWidth + 'px';
}
}
}
Live working demo: http://jsfiddle.net/kkulig/y3fj6vpq/
API reference:
https://api.highcharts.com/highcharts/chart.events.render
Change these two properties of the title.
left: 77px;
width: 922px;
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'm building an Ionic App with AngularJS. In this App I want a line-chart of data. Yesterday I asked a question about this (Angular-Chart not rendering anything) which was answered, but now there's a new problem.
Sometimes the chart is instantly visible, but when I rotate the screen between landscape/portrait it keeps getting bigger every rotation.
Some other times the graph is not visible at all (except for the legend) till you rotate the screen some times.
When I check it out with the web inspector on my iPhone I see that the HTML-attributes for height gets bigger everytime. Same for the CSS-height style.
The HTML in the web-inspector initially looks like this: (this is when the graph is on an inactive tab)
<div ng-show="graph.visible && finishedLoading" class="ng-hide" style="">
<div class="chart-container"><canvas class="chart chart-line" data="graph.data" labels="graph.labels" options="graph.options" series="graph.series" colours="graph.colours" getcolour="graph.getColour" click="graph.click" hover="graph.hover" legend="graph.legend" width="576" height="424" style="width: 288px; height: 212px;">
</canvas><chart-legend><ul class="line-legend"><li><span style="background-color:rgba(70,191,189,1)"></span>Waarde</li><li><span style="background-color:rgba(247,70,74,1)"></span>Bovengrens</li><li><span style="background-color:rgba(253,180,92,1)"></span>Ondergrens</li></ul></chart-legend></div>
</div>
After making that tab active its HTML looks like this:
<div ng-show="graph.visible && finishedLoading" class="" style="">
<div class="chart-container"><canvas class="chart chart-line" data="graph.data" labels="graph.labels" options="graph.options" series="graph.series" colours="graph.colours" getcolour="graph.getColour" click="graph.click" hover="graph.hover" legend="graph.legend" width="576" height="424" style="width: 288px; height: 212px;">
</canvas><chart-legend><ul class="line-legend"><li><span style="background-color:rgba(70,191,189,1)"></span>Waarde</li><li><span style="background-color:rgba(247,70,74,1)"></span>Bovengrens</li><li><span style="background-color:rgba(253,180,92,1)"></span>Ondergrens</li></ul></chart-legend></div>
</div>
This time the graph is instantly visible, which is not always the case. I think that has to do with the web-inspector. When I don't have the web inspector open, only the legend is initially visible.
After rotating to landscape and back to portrait four times, the HTML looks like this:
<div ng-show="graph.visible && finishedLoading" class="" style="">
<div class="chart-container"><canvas class="chart chart-line" data="graph.data" labels="graph.labels" options="graph.options" series="graph.series" colours="graph.colours" getcolour="graph.getColour" click="graph.click" hover="graph.hover" legend="graph.legend" width="576" height="816" style="width: 288px; height: 408px;">
</canvas><chart-legend><ul class="line-legend"><li><span style="background-color:rgba(70,191,189,1)"></span>Waarde</li><li><span style="background-color:rgba(247,70,74,1)"></span>Bovengrens</li><li><span style="background-color:rgba(253,180,92,1)"></span>Ondergrens</li></ul></chart-legend></div>
</div>
As you can see, the height gets bigger every rotation.
The HTML-file looks like this:
<div ng-show="graph.visible && finishedLoading">
<canvas
class="chart chart-line"
data="graph.data"
labels="graph.labels"
options="graph.options"
series="graph.series"
colours="graph.colours"
getColour="graph.getColour"
click="graph.click"
hover="graph.hover"
legend="graph.legend">
</canvas>
</div>
The $scope.graph looks like this:
$scope.graph = {
data: [
[], // value
[], // upper value
[] // lower value
],
labels: [],
options: {
animation: false,
pointDotRadius : 2,
datasetFill : false,
responsive: true,
maintainAspectRatio: false,
scaleGridLineColor : 'rgba(0, 0, 0, .1)',
showTooltips: false
},
series: ['Waarde', 'Bovengrens', 'Ondergrens'],
colours: ['#46BFBD', '#F7464A', '#FDB45C'],
// getColour:
// click:
// hover:
legend: true,
visible: false
}
and those values get set here:
function loadGraphData() {
$scope.graph.data = [
[], // value
[], // upper value
[] // lower value
];
$scope.graph.labels = [];
for (var key in $scope.results) {
var result = $scope.results[key];
$scope.graph.data[0].push(result.value);
$scope.graph.data[1].push(result.high);
$scope.graph.data[2].push(result.low);
$scope.graph.labels.push($filter('date')(result.date, 'dd MMM HH:mm'));
}
};
which is called once a request has finished loading, so before the tab with the graph is even visible.
The CSS I have applied for canvas is:
canvas {
width: 100%!important;
height: 100%!important;
}
I hope the problem is clear and that someone can help me out. I've tried everything I could think of. If any more info is needed, let me know!
EDIT// Something to note: when I put the graph on the first tab (which is initially active) the graph is instantly visible, but it has the same strange issue of getting bigger when resizing the browser window..
Try After adding crosswalk plugin. hope it works. plugin documentation here
I had a similar problem, not on mobile, but the solution I used may help. My problem was that after each redraw, the graph always increases its height in 40px.
What I found while debugging was that the Charts.js's constructor gets the value returned by computeDimension function and assign it to the canvas' height. The problem, in my case, was that computeDimension returns the offsetHeight and this value did happen to be always greater than the canvas' height property.
The docs (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight) say:
Typically, an element's offsetHeight is a measurement which includes
the element borders, the element vertical padding, the element
horizontal scrollbar (if present, if rendered) and the element CSS
height.
So, I checked my canvas element and it was using a padding of 20px. After setting the padding to 0px the problem was gone.
Try to force a 0px padding (or even a 0px border) on your canvas.
I'm using kendo-ui to draw a donut chart like in this example
but I want it to resize when the container div resizes.
Not trouble if you don't set size or sizeHole since it ill automatic scale to fit the div.
Now I want my donut to be thin (outter radius slight greater than inner radius).
If I try to set the size to 25 pixels the donut now don't fills all my div and wort only the sizeHole resizes.
seriesDefaults: {
type: "donut",
size: 25,
...
If I try to set the sizehole to 250 it ill no more resizes
seriesDefaults: {
type: "donut",
sizeHole: 250,
...
If I try to set both attibutes ill affect each other and at the donut don't resizes at all
What I really need is to fix the donut dimensions to some % of the container, lets say size to 50% and sizeHole to 5% and let user drag/rezise the browser and keep the size/sizeHole/Container size aspect ratio.
I tried something using
$(window).resize(Resize(element));
...
function Resize(element) {
var minContainerSize = element[0].clientHeight;
if (minContainerSize > element[0].clientWidth || minContainerSize == 0)
minContainerSize = element[0].clientwidth;
return function () {
var chart = element.data("kendoChart");
var pieSeries = chart.options.seriesDefaults;
pieSeries.size = minContainerSize * 0.13;
//pieSeries.holeSize = minContainerSize * 0.299;
chart.refresh();
}
};
But it not worked out since I ill need to get the container size AFTER the resize event ends to get the new container size.
I can try to implement something like this after resize solution
but code is turning in a mess fast.
There's any nice (unknow for me) property to simple set the donut "thickness" in as percentual or proportional to the whole size (in a way it keeps resizing) or any workaroud not involving setTimeout?
I think you should be using holeSize not sizeHole.
http://www.telerik.com/forums/donut-chart-set-inner-and-outer-radius