I use this activity gauge highchart graph. But, when I resize it. The layout become a mess. In this fiddle, I change the height and width of the graph. But, the label is misplaced.
chart: {
type: 'solidgauge',
marginTop: 50,
width:700,
height:700
},
You must to update tooltip and stroke position according to you new chart width and height like this :
tooltip: {
...
positioner: function (labelWidth) {
return {
x: 350 - labelWidth / 2, // edited
y: 320 // edited
};
}
}
Updated fiddle
Related
I have this line chart where I am showing a shared tooltip of all series on the right side of the chart. However, in the mobile view, it looks ugly because half the screen space is taken by the chart and half by the tooltip. In the mobile responsive layout, I want the chart to take the whole screen width and shared tooltip to go to the bottom of the chart. How can I achieve this?
I have written the code below and it works on jsfiddle.
responsive: {
rules: [{
chartOptions: {
chart: {
marginRight: 0
},
tooltip: {
outside: true,
positioner: function(boxWidth, boxHeight, point) {
var chart = this.chart; // get plotTop;
return {
x: chart.plotLeft + chart.plotSizeX - 100,
y: chart.chartHeight - chart.plotTop - chart.xAxis[0].bottom + boxHeight + 50
};
}
}
},
condition: {
maxWidth: 640
}
}]
}
https://jsfiddle.net/userMB/k790c4rw/4/
But the problem is that my chart is enclosed inside a container div which is further enclosed inside a section. Like the code below: Hence, the tooltip doesn't show below the chart as I want. Any ideas how I can achieve this?
<section class="section section-lg ">
<div class="container" style="max-width: 95vw; border: 1px solid grey; min-height: 65vh;">
<"some form">
<div id="chart" style="min-height: 50vh;"></div>
</div>
<section>
And that same code behaves differently within enclosed section and div elements. see https://jsfiddle.net/userMB/k790c4rw/10
You can use responsive rules and define different options for small screens. For example:
responsive: {
rules: [{
chartOptions: {
chart: {
marginRight: 0
},
tooltip: {
positioner: function(boxWidth, boxHeight, point) {
var chart = this.chart; // get plotTop;
return {
x: chart.plotLeft + chart.plotSizeX - 100,
y: chart.plotTop + chart.plotSizeY - 50
};
}
}
},
condition: {
maxWidth: 640
}
}]
}
Live demo: https://jsfiddle.net/BlackLabel/w4qsjpy7/
API Reference: https://api.highcharts.com/highcharts/responsive.rules
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
I did responsive Meteogram , but when the browser window is enlarged, the icons ( clouds, sun ) don't move. How to get around this ?
[http://jsfiddle.net/fsrqvn9f/2/][1]
You aren't telling the chart to move those items. You'll need to add a handler for the chart redraw event:
chart: {
renderTo: this.container,
marginBottom: 70,
marginRight: 40,
marginTop: 50,
plotBorderWidth: 1,
events: {
redraw: function () {
// remove chart annotations
meteogram.onChartLoad(meteogram.chart);
}
}
},
I didn't write the code to remove the annotations, but you'll need to implement that also. I'd reccommend adding them to a group, so you can remove them all at once.
http://jsfiddle.net/fsrqvn9f/4/
EDIT - Removing the icons.
Here's what you would do to remove the weather icons. You'll need to do something similar for the Wind arrows.
When you add the icons to the graph, add them in a named group. In this case I named the group weatherSymbols. highcharts will create you elements with the class highcharts-weatherSymbols (or 'highcharts-' + grouname). This way you can easily find these items to remove them later.:
// Create a group element that is positioned and clipped at 30 pixels width and height
group = chart.renderer.g('weatherSymbols')
.attr({
translateX: point.plotX + chart.plotLeft - 15,
translateY: point.plotY + chart.plotTop - 30,
zIndex: 5
})
Then removing them is as easy as:
events: {
redraw: function () {
// remove chart annotations
$('.highcharts-weatherSymbols').remove();
meteogram.onChartLoad(meteogram.chart);
}
}
In my browser (Firefox 12), this example of a Highcharts Chart looks not correct. The labels are not styled in the same radius as the background radius is.
Is there any option in Highcharts to fix this?
Thx in advance.
Yes, there are options on the label that will fix this. If you format the label according to the below code the label should arc properly around the gauge.
labels: {
step: 2,
rotation: 'auto',
align: 'center',
distance: 15,
x: 0,
y: 0
},
I updated your jsfiddle to demonstrate. You were missing the x and y position offsets.