I need to increase the size of the highcharts, ie; the height parameter.
I'm using the plotAreaHeight parameter but it is not working ie; the height remains the same.
chart: {
// type: 'bar',
plotAreaHeight: 800,
Here is my fiddle.
https://jsfiddle.net/cucjw7xc/8/
As far as I am aware plotAreaHeight is not a configuration option.
Two ways to set the height of your chart:
1) use the height property:
chart: {
height: 800
}
Updated Fiddle:
https://jsfiddle.net/cucjw7xc/9/
2) Set the height on your containing div
#container: {
height: 800px;
}
Updated Fiddle:
https://jsfiddle.net/cucjw7xc/10/
Related
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 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/
For the following jsFiddle,I want to use the rangeSelector (but do not want to show them on chart) because I want the chart always show the data for 3 months, which means I cannot disable the range selector.
To hide the range selector I have used:
buttonTheme: {
visibility: 'hidden'
},
labelStyle: {
visibility: 'hidden'
}
Now on top of chart there is a space/blank area. I want to hide it. The reason is I want to show the chart in a small box. And this blank area because of range selector looks awkward in layout. I am thinking is there a way to add negative margin below range selector buttons?
You can set chart's margin, spacing top to negative value.
chart: {
renderTo: 'container',
spacingTop: 0,
marginTop: -35
},
Or better, set the range selector's height to 0.
rangeSelector: {
height: 0,
example: http://jsfiddle.net/cpvLzLso/34/
I have a highstock chart witch candlestick data type.
When I mouseover the data point, I want to highlight the background of the point.
This is what tooltip -> crosshairs do:
tooltip: {
crosshairs: true
}
But the only width option to set is the fixed width. See http://jsfiddle.net/8YBd7/.
This fixed width works with initial zoom, but when I change the zoom, the width is not updated with new point width.
When I set 100% width, the crosshair would fill entire chart area:
tooltip: {
crosshairs: {
width: '100%'
}
}
Is there another option how to highlight current data point by changing its background or setting the width to the pointPixelInterval or something else?
Meanwhile, I produced a dirty workaround, so improvements are welcomed:
xAxis: {
events: {
afterSetExtremes: function() {
this.chart.tooltip.crosshairs = [];
this.chart.options.tooltip.crosshairs.width = (this.width / (this.series[0].points.length-1));
}
}
}
http://jsfiddle.net/QbdEu/1/
Whenever the zoom is changed, the width is recounted according to chart width and number of displayed data points. The width is not updated when calling redraw(), so the old crosshair needs to be removed.
Have you tried to use Renderer http://api.highcharts.com/highstock#Renderer.rect() which allows to plot any shapes and defined width? Only what you need is getting point width in pixels frpm(chart.series[0].data[0].graphic) and then setting correct widht of "shape".