I have different high charts as shown below. I have more number of series in one graph and have only one series in other one, In this case in my actual screen graph portion of first graph is bigger than second one, so is it possible to keep graph height constant without considering number of series (legends which occupied height at bottom)?
As was mentioned in the comment, you grab maximum of charts' margin bottom and set it for the rest of the chart. It should be set on load event in the last chart.
function adjustLegend() {
var charts = Highcharts.charts;
var marginBottomMax = charts
.reduce((prevChart, currChart) => Math.max(prevChart.marginBottom, currChart.marginBottom));
charts.forEach(chart => {
if (chart.marginBottom < marginBottomMax) {
chart.update({
chart: {
marginBottom: marginBottomMax
}
});
}
});
}
chart: {
events: {
load: adjustLegend
}
},
example: http://jsfiddle.net/wsrtaq09/1/
If you know what should be the legend height, you can set legend.maxHeight.
legend: {
layout: 'vertical',
maxHeight: 50,
},
example: http://jsfiddle.net/wsrtaq09/2/
Related
I am using the render event to alter the positioning of of my x-axis labels on a highchart. It works great - centering labels between ticks on a datetime x-axis and removing the last label.
When I export the chart - with the same setup - the function is called (see centerTimelineLabels below), but it cannot access the rendered x-axis labels. Please see the images below showing the different x-axis labels in the DOM and as an exported PNG.
jsfiddle here: https://jsfiddle.net/SirMunchington/36xcbr7m/52/
Specifically, this.container inside of the function, is an empty wrapper on export... no children.
Is there a way to access and manipulate the x-axis labels in a highchart when exporting?
exporting: {
chartOptions: { // specific options for the exported image
chart: {
backgroundColor: '#ffffff',
events: {
render: centerTimelineLabels
}
}
},
...
var centerTimelineLabels = function() {
var labels = $('.highcharts-xaxis-labels span', this.container).sort(function(a, b) {
return +parseInt($(a).css('left')) - +parseInt($(b).css('left'));
});
$(labels).css('margin-left',
(parseInt($(labels.get(1)).css('left')) - (parseInt($(labels.get(0)).css('left')) + parseInt($(labels.get(1)).width()))) / 2
);
$(labels.get(this.xAxis[0].tickPositions.length - 1)).remove();
};
CORRECT X-AXIS VIA WEB
INCORRECT X-AXIS VIA EXPORT
Thank you for the demo.
Try to use this config - notice that the render event triggers after each chart redraw:
"events": {
render() {
let chart = this,
xAxis = chart.xAxis[0],
ticks = xAxis.ticks,
firstTick = ticks[xAxis.tickPositions[0]],
secondTick = ticks[xAxis.tickPositions[1]],
ticksDistance = secondTick.mark.getBBox().x - firstTick.mark.getBBox().x;
for (let i in ticks) {
let tick = ticks[i];
if (!tick.isLast) {
tick.label.translate(ticksDistance / 2, 0)
}
}
}
}
Demo: https://jsfiddle.net/BlackLabel/o06r1yfw/
To hide the last label set the xAxis.showLastLabel property to false.
API: https://api.highcharts.com/highcharts/xAxis.showLastLabel
As I am forcing Highcharts to show the last label on the xaxis, this last label is partially hidden, or partly disappears:
Why is that? And what can I do? Setting the »marginRight« in the »chart« settings does not do the trick.
Thanks for any hints.
You can set align: 'right' attribute for the last label:
chart: {
events: {
render: function() {
var ticks = this.xAxis[0].ticks;
Highcharts.objectEach(ticks, function(tick) {
if (tick.isLast && tick.label.xy.opacity) {
tick.label.attr({
align: 'right'
});
}
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/tv5f0x2a/
API Reference: https://api.highcharts.com/class-reference/Highcharts#.objectEach%3CT%3E
This might be the chart container width being too small, or the chart itself is too small.
You should try:
have you tried changing chart width? https://api.highcharts.com/highcharts/chart.width
try making the container for the chart wider
The space for xAxis generally is rendered dynamically by the Highcharts library and add the ellipsis in the correct place, making it display from the start and cutting it when it stop displaying it on the graph with some ellipsis.
When I try to change that space to not render dynamically, the property marginBottom does it,but it stops picking up when the text should start displaying and the start of the text is cutted from the down of the graph. Is there a way to render correctly the text at the bottom from the highcharts? I Do need it to be rotate 270 degrees, and not let the auto rotate work, and don't want to collapse more part of the graph just for displaying the text.
Here is a sample when that happes:
Highcharts.chart('container', {
chart: {
height: 350,
spacingBottom: 0,
marginBottom: 50,
type: "column"
},
series: [{
name: 'Total',
data: [1,2,3,4,5]
}],
xAxis: {
categories: ["very long name to test if the characters are rigth and cropped",
"Not so long but long enough", "I still am long and out of the screen",
"lets see how is cropped", "cropped", "crop"],
labels: {
rotation: 270
}
}
});
Sample fiddle with marginBottom : https://jsfiddle.net/ragmar/6ru4hze3/
If you remove the marginBottom, even the legend move down a bit.
It is possible to do this behavior? even including some css?
Thanks in advance
To make it work the way you want, you have to make some modifications in Highcharts core. For example you can do not use marginBottom option, but set fixed value as a commonWidth variable in renderUnsquish method:
if (attr.rotation) {
commonWidth = (
maxLabelLength > chart.chartHeight * 0.5 ?
40 : // changed from 'chart.chartHeight * 0.33'
maxLabelLength
);
if (!textOverflowOption) {
commonTextOverflow = 'ellipsis';
}
}
Live demo: https://jsfiddle.net/BlackLabel/moL1tw6c/
I am using Stock High Charts, I want to display all the labels in x-axis (the labels show city names). How do I achieve this?
xAxis: {
labels: {
rotation: -50,
step: 1
}
},
Increase the value of height. That's the solution I had to apply.
Example code:
chart: {
type: 'bar',
height: 1000
}
I have a (horizontal) bar chart and I want to add dataLabel's at the base (or left most part) of the bar for the series.
similar to this: http://flowingdata.com/2009/05/22/poll-results-what-data-related-area-are-you-most-interested-in/
Is there a way using the formatter function to set this value?
plotOptions: {
bar: {
dataLabels: {
formatter: function() {
this.series.options.dataLabels.x = ?????????????
return this.y;
},
The task of the formatter function is to format the label text. It gives you a way to modify the internal state of the chart, but that's really just a hack and as such may or may not work.
One way to place the labels at the base is to use stack-labels instead of data-labels (the data-labels will be placed at the top of the bar either aligned left or right). To configure stack labels at the base, do:
yAxis: { // The y axis is horizontal 'bar' layout
stackLabels: {
style: {
color: 'white' // Make the labels white
},
enabled: true, // Enable stack labels
verticalAlign: 'middle', // Position them vertically in the middle
align: 'left' // Align them to the left edge of the bar
}
}
You will also need to set stacking to 'normal':
Example on jsfiddle:
Update: Labels for stack-totals will show the sum of all series for a specific category (stack) so only in the case of having one single series in the chart will stack-labels and data-labels show the same value.