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/
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
I am wanting to move the tooltip downwards a few pixels instead of always at the top of each stack (on stacked bar chart).
I found this in the docs about positioners, but I cannot understand the structure of code and where it should actually go.
Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
var tooltip = this;
return {
x: 0,
y: -50
};
}
For reference, you can see where I've tried to place it here ( not much wonder why its not working )
Config seems to have a position and yPadding, neither of which seem to have effect I want when I put them in the tooltips options:
tooltips: {
yAlign: 'top',
position: 'nearest',
yPadding: 50
}
yPadding distorts the tooltip, I'm not sure why but it muddles up the caret and box.
I have a highchart graph with tooltips. This is how I want to render tooltips every time.
When the tootlip doesn't fit the svg container, highcharts swaps the position of tooltip like this.
I know how to fix this but when I do this.
positioner: function(boxWidth, boxHeight, point) {
return {
x: point.plotX,
y: point.plotY - boxHeight
};
},
Tooltip is correctly always on top, but overflows to the right(image_1). I would like to have the tooltip always on top + fit the container from the sides. (image_2)
Is there any easy way to achieve this?
Thanks (http://jsfiddle.net/4xomw3aj/)
Ok I just found out how to 'not swap'. In Tooltip.getPosition()
firstDimension = function (dim, outerSize, innerSize, point) {
ret[dim] = point - distance - innerSize;
},
I've been trying to find a nice looking doughnut chart thats responsive and I came across chart.js
However, I am having a really hard time getting the Doughnut Chart be as big as I want it.
Does anyone know how I can make it have a minimum height? I'd love to hear your suggestions.
My goal is to have it fill up the red div both height and width wise. At the moment, this is what I have:
I'm using bootstrap grid
<div class="col-sm-4" style="border:1px solid red;height:350px">
<canvas id="weekly_doughnut_data"></canvas>
</div>
<div class="col-sm-8">
<canvas id="weekly_line_data"></canvas>
</div>
Javascript
var weekly_doughnut_data = [
{
value: 1,
color:"#53A3EB",
highlight: "#53A3EB",
label: "Simple"
},
{
value: 3,
color: "#34495e",
highlight: "#34495e",
label: "Advanced"
}];
var weekly_doughnut_ctx = document.getElementById("weekly_doughnut_data").getContext("2d");
var weekly_doughnut_chart = new Chart(weekly_doughnut_ctx).Doughnut(weekly_doughnut_data,{percentageInnerCutout : 90, responsive: true});
I've tried a resize function where I set the height myself, but it get's very glitchy (on mouseover) and slow.
$(window).resize(function()
{
weekly_doughnut_ctx.canvas.height = $(".canvas_holder").height();
weekly_doughnut_chart = new Chart(weekly_doughnut_ctx).Doughnut(weekly_doughnut_data,{percentageInnerCutout : 90, responsive: true});
//weekly_doughnut_chart.resize();
//weekly_doughnut_chart.redraw();
});
I wasn't really able to "solve" this per say. But what appears to be happening is the red bordered div is just slightly to small for the responsive chart to get to the appropriate size for that div width I think?
What I ended up doing is putting the charts (responsive mode on) in 2 bootstrap columns and it ended up doing the looking very nice.
<div id="circle_chart" class="col-md-5"><canvas></canvas></div>
<div id="chart_container" class="col-md-7"><canvas></canvas></div>
On window resize, I did end up calculating the height of circle_chart and then adding a margin of 50% the height and subtracting that from the height of the chart_container so that it was centered with the other graph.
$("#circle_chart").css("margin-top", (($("#chart_container").height()-$("#circle_chart").height())/2)+"px");
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