I am trying to reduce the width of the bar. I achieved the same by using pointWidth attribute. However, the padding before and after the label "1 page" is too high. I want to compress the whole graph similar to the second image.
Does anyone know?
Before:
After:
try setting the height of the chart :
chart: {
type: 'bar',
height: 250, // this can be calculated on the basis of categories length along with some default margin at the bottom and top of the chart
}
You can set use pointPadding / groupPadding http://api.highcharts.com/highcharts#plotOptions.bar.groupPadding
http://api.highcharts.com/highcharts#plotOptions.bar.pointPadding
Related
Only the biggest number on bar char overlap the bar line
I tried to add maxPadding for the xAxis, but it looks like too bad for small numbers.
Another way i tried
crop: false, allowOverlap: true, overflow: 'allow',
but there anothers problems with text cut appears
You can set the higher axis max property or try to adjust the axis left and width properties. Take a look at the example in the following demo:
Demo:
https://jsfiddle.net/BlackLabel/jvo1sth2/
API Reference:
https://api.highcharts.com/highcharts/yAxis.max
https://api.highcharts.com/highcharts/yAxis.left
https://api.highcharts.com/highcharts/yAxis.width
I have a HighCharts Pie chart configured as a "donut" style, and I set the title "verticalAlign" to "middle" but this seems to center the title in the whole area taken up by the chart (including the legend) which is fine for a few data points, but once the chart has many points added, the title starts overlapping the colored segments and even the legend. Is there a way to center the title in just the donut?
Example:
Highcharts has quite a number of ways to adjust the style. Not clear how you display your title, but it seems that the problem is in the height of your legend. One way to go is to adjust the 'y' parameter of the title to move title a little:
title: {
text: 'A title to move',
align: 'center',
verticalAlign: 'middle',
y: -20,
}
Drawback is that it may not fill all the possible chart content, so you have to somehow estimate how much you want to adjust the 'y'.
https://api.highcharts.com/highcharts/title.y
After much trial and error, the final solution for my specific use-case involved:
Fixing the 'chart.spacingTop' parameter to 10 pixels. This fixed the top of the chart so it wouldn't dynamically change in the vertical space.
Setting 'plotOptions.pie.size' to '250px'. This fixed the pie size to 250px regardless of how many points were shown.
Setting 'plotOptions.pie.center' to '['50%', 105]'. This centered the chart at 50% width, 105px from the top.
Limiting my series to 24 data points max (to avoid a legend that was too long to manage)
Finally, I created a <div> right before the chart container that allowed me to use CSS to set it relative to the chart, positioning my label right in the center of the donut.
The result:
Is it possible in highcharts to make the chart width, the plotting area the same width whether there are labels or not?
For example, both these charts have width 150 but one looks thinner than the other because it has the labels enabled.
I can do this programmatically but it is a bit messy. Is there a way?. I tried, for example, to set the label as enabled but not visible but this combination of options does not exist.
Thanks for any help
You can set fixed chart margin:
chart: {
marginBottom: 20
}
Live demo: http://jsfiddle.net/BlackLabel/st8c0r1p/
API Reference: https://api.highcharts.com/highcharts/chart.marginBottom
Is there any way to make a Highcharts pie chart with a height that automatically fits the chart and the legend? I have a variable number of legend elements and cannot rely on a fixed pixel height or one relative to the width.
The legend is far away from the pie chart. I would like the pie chart to be at the top of the container with the legend right below, with the height set to whatever the combined height is (rather than setting a static height).
You can calculate the required chart height and use setSize method to set it:
events: {
load: function() {
this.setSize(
null,
this.seriesGroup.getBBox().height +
this.marginBottom + this.plotTop + 20
);
}
}
Live demo: http://jsfiddle.net/BlackLabel/5jL1acdk/
API: https://api.highcharts.com/class-reference/Highcharts.Chart#setSize
I've just started using JqPlot and want to display a small chart
However there is always a small margin at the top and to the left.
Looking at the css produced the jqplot-event-canvas is given absolute position with top and left set at 10px.
Is there a simple way to solve this so that the pie is positioned without the extra spacing?
I've tried to set the padding to 0 in the grid and pie rendererOptions.
Also set show:false on the axes, title, ledgend ...,
Any ideas?
Try setting the gridPadding like this:
var plot1 = $.jqplot('pie1', [data], {
gridPadding: {top:0, bottom:0, left:0, right:0},
....
Because by default, each plot has the following grid padding:
{top:10, right:10, bottom:23, left:10};
I think this might explain the issue you are seeing.