Any idea how to make the chart padding smaller?
Yep - set the chart's margin to 0:
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
margin: 0 // <---- change this number
}
(Live demo here)
You can also set spacing value
http://api.highcharts.com/highcharts#chart.spacingRight
http://api.highcharts.com/highcharts#chart.spacingLeft
To control size of pie chart you can use:
http://api.highcharts.com/highcharts#plotOptions.pie.size
Related
I want to increase the chart grid lines to fill the width of the graph.
I have got it till this point: https://jsfiddle.net/mukeshshamra1201/8pu9a5c4/97/
I have used y-axis property to achieve something, but I am not able to figure out the rest.
yAxis: {
min: 0,
title : "",
gridLineDashStyle: 'ShortDash',
labels: {
align :"left",
x:-6,
y:-3
}
}
I want something kike this :
Set spacingLeft and spacingRight to 0:
chart: {
...
spacingLeft: 0,
spacingRight: 0
}
Live demo: https://jsfiddle.net/BlackLabel/3Lpsz0hd/
API Reference: https://api.highcharts.com/highstock/chart.spacing
HIGH CHARTS
Please look at JSFIDDLE. Here the bars overlap each other. How to prevent this by resizing the bar width dynamically.
If happens because you set bar width with fixed value. If you want bars to take all available place for width, instead of using pointWidth, set pointPadding to 0, groupPadding to 0 and borderWidth to 0.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.bar.pointPadding
http://api.highcharts.com/highcharts/plotOptions.bar.groupPadding
http://api.highcharts.com/highcharts/plotOptions.bar.borderWidth
Example:
http://jsfiddle.net/yek6g5vy/
If possible remove container inline css height.
Fiddle Demo
Or you can use scrollbar using highstock.js
xAxis: {
categories: ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'sixth', 'seventh'],
allowDecimals: false,
min: 0,
max: 4,
scrollbar: {
enabled: true
},
},
Fiddle demo
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/
Is there any way to completely hide scrollbar's buttons which contain arrow?
In addition to this, is there any way I can set the position of scrollbar such as setting y value so that the scrollbar hovers on the chart?
Setting its color to transparent doesn't help.
scrollbar: {
buttonBackgroundColor: 'transparent',
buttonBorderWidth: 0,
buttonArrowColor: 'transparent',
buttonBorderRadius: 0
}
EDIT:
Even if I hide the elements, I cannot use the space left as the picture below.
You can manipulate SVG elements.
chart: {
events: {
load: function () {
var chart = this;
chart.scroller.scrollbarButtons[0].hide();
chart.scroller.scrollbarButtons[1].hide();
}
}
},
Example:
http://jsfiddle.net/fexw25Lz/
It seems that the options startOnTick, and endOnTick have no effect on a boxplot. Is there anyway to align the outermost ticks to the graph edge with a boxplot?
xAxis: {
startOnTick: true,
endOnTick: true,
min: -1,
max: 6,
},
I have tried adding most combinations of minPadding/maxPadding, tickmarkPlacement: between/on, and manually setting ticks with tickPositioner without any luck. The only workaround I have is to shrink min/max so the padding fixes itself. I would prefer a better solution, because this workaround becomes very ugly for dynamic data.
Here is the fiddle demo demonstrating the problem and another with the workaround. Again, is there any way to align the outermost ticks to the graph edge with a boxplot?
Looking into this led me to these comments buried in parts/Axis.js.
if (!axis.single) {
// minPointOffset is the value padding to the left of
// the axis in order to make room for points with a
// pointRange, typically columns. When the
// pointPlacement option is 'between' or 'on', this
// padding does not apply.
minPointOffset = Math.max(
minPointOffset,
isString(pointPlacement) ? 0 : seriesPointRange / 2
);
// Determine the total padding needed to the length of
// the axis to make room for the pointRange. If the
// series' pointPlacement is 'on', no padding is added.
pointRangePadding = Math.max(
pointRangePadding,
pointPlacement === 'on' ? 0 : seriesPointRange
);
}
The issue is caused by the point padding and probably occurs on any column style plot. The padding will be ignored if pointPlacement is set to 'on' or 'between' on the series.
series: {
type: 'boxplot',
pointPlacement: 'on',
data: ...
}
Here is the working fiddle.