I've set
pointWidth: 20,
pointPadding: 0,
groupPadding: 0
But the chart still expands to fill the default chart height. Is it possible to have Highcharts adjust the chart height instead?
http://jsfiddle.net/MLELM/
The chart will fill the available height with what you give it.
point and group padding are a proportion of the available space, so the chart is honoring the properties as specified.
It uses the size of the containing element to determine its size, so it cannot possibly ignore the height of the containing element.
If you want a smaller chart that fills a larger space on your page, you can put your containing element in another wrapper element. Then you can calculate yourself how tall your chart should be based on the number of series, and pass that height to the container.
If you want to have the series that you have specified clustered near the top, you will need to add additional null data points to fill the space below them.
If you can be more specific about what you want and why, better answers may be available.
[[ update
Stumbled across this post again, and remembered that I have a demo that automatically sets the chart height based on some predefined parameters, and the number of data points.
var barCount = chartData.length,
pointWidth = 20,
marginTop = 70,
marginRight = 10,
marginBottom = 50,
marginLeft = 100,
groupPadding = 0,
pointPadding = 0.3,
chartHeight = marginTop
+ marginBottom
+ ((pointWidth * barCount)
* (1 + groupPadding + pointPadding));
Fiddle here:
http://jsfiddle.net/jlbriggs/kpu5d1qf/
Related question here:
How to calculate the height of bar chart
Yes, you can set the chart height like that:
chart: {
type: 'bar',
height: 200,
},
See also http://jsfiddle.net/MLELM/3/
Related
I've developed a bunch of bar charts in HighCharts cloud with positive and negative values.
First question:
is it possible to have the xAxis appear at the 0 line (not at the bottom of the chart)?
What I've done so far is offset the xAxis so it's placed on the 0 line, which kinda works but I was hoping for a better solution. The other method I was think was to use plotLines code on the yAxis, but I don't get the ticks:
plotLines: [{
color: '#010101',
width: 2,
value: 0,
zIndex: 5
}],
Second question:
is it possible to have the tick marks to appear between each bar, and not just the bars that have an xAxis label?
This is what's rendering for me at the moment, and I'm trying to get a tick between all the bars while showing the same number of labels https://cloud.highcharts.com/show/cLtfEDClS
First question:
You can merge this configuration into chart options in Cloud’s custom code section:
chart: {
events: {
load: function() {
var yAxis = this.yAxis[0];
this.xAxis[0].update({
offset: -yAxis.toPixels(Math.abs(yAxis.min), true)
});
}
}
},
Demo: http://jsfiddle.net/BlackLabel/6712zrod/
It automatically positions x axis so that it works as y = 0 line.
Second question:
Try setting X Axis[0] > Labels > Step to 1.
API reference: https://api.highcharts.com/highcharts/xAxis.labels.step
Explanation from Docs:
To show only every n'th label on the axis, set the step to n. Setting the step to 2 shows every other label.
By default, the step is calculated automatically to avoid overlap. To prevent this, set it to 1. This usually only happens on a category axis, and is often a sign that you have chosen the wrong axis type.
Highcharts introduced word cloud in version 6.
I was trying out and I faced few problems which were not documented
How to disable the spiral nature and layout it horizontally?
All the words are not being displayed. In the below screenshot, there are exactly 500 words. But I cannot see them.
Lot's of empty space on either side.
I have exactly 500 words in this word cloud. With minimum weight as 5 and adding one to each additional word. So weights ranges from 5 to 505.
I have tried doing this, but no use.
Highcharts.seriesTypes.wordcloud.prototype.deriveFontSize = function(relativeWeight) {
var maxFontSize = 48;
// Will return a fontSize between 0px and 25px.
let size = Math.floor(maxFontSize * relativeWeight);
return size < 8 ? 8 : size;
};
I have set the width to 100% but it is still not occupying the whole area
Updated Fiddle link
UPDATE
I disabled the spiral nature by writing my own placement strategy like below. Just a copy paste of Highcharts original example and disabling rotation
var getRandomPosition = function getRandomPosition(size) {
return Math.round((size * (Math.random() + 0.5)) / 2);
};
var randomPlacement = function randomPlacement(point, options) {
var field = options.field,
r = options.rotation;
return {
x: getRandomPosition(field.width) - (field.width / 2),
y: getRandomPosition(field.height) - (field.height / 2),
rotation: 0
};
}
Highcharts.seriesTypes.wordcloud.prototype.placementStrategy.randomHorizontal = randomPlacement;
I also set the margins. But it did not help
marginRight: 0,
marginLeft: 0
marginBottom: 0
Addressing to second and third
Second there are all words in the chart but some are in very small size difficult to see. Here I use deriveFont
Third you can use chart.margin to reduce space outer edge of the chart and the plot area
This demo shows how to deal with second and third
/*Object.keys(data).map(function(key) {
data[key].name=key
});// just for demo to show 500 words populating*/
Highcharts.seriesTypes.wordcloud.prototype.deriveFontSize = function(relativeWeight) {
var maxFontSize =10;
// Will return a fontSize between 0px and 25px.
let size = Math.floor(maxFontSize * relativeWeight);
return size < 8 ? 15 : size; //sets min size to be 15 if less than 8
};
Highcharts.chart('container', {
chart: {
"type": "wordcloud",
margin: [20, 0, 0, 0]
},
"series": [{
"data": data,
"placementStrategy": 'random'
}],
"title": {
"text": "WORD CLOUD"
}
});
Fiddle demo
Update
It is not showing all 500 words. It will show all words only when font size is very small.
Workaround for reducing the spaces on both sides of the plot (in this particular case):
You can use negative margins:
marginRight: -300,
marginLeft: -300
Live demo: http://jsfiddle.net/kkulig/eyuvcpLe/
The latest release from highcharts has fixed my issue. But there are still other issues in the issue tracker opened by me in the highcharts.
Track it here
https://github.com/highcharts/highcharts/issues/7241
I have a column chart that has yAxis labels inside the plot area. DEMO: http://jsfiddle.net/o4abatfo/
This is how I have set up the labels:
yAxis: {
labels: {
align: 'left',
x: 5,
y: -3
}
}
The problem is that the leftmost column is so near the plot area edge that labels are overlapping it. Is there a way to adjust the plot area padding so that the columns would start a bit further on the right?
You can set min value as -0.49.
http://jsfiddle.net/o4abatfo/2/
One possible solution:
Keep the labels on the outside, and apply the plotBackgroundColor as the chart backgroundColor.
This means that the legend will be encased in the background color too, but, again, it's on option.
Example:
http://jsfiddle.net/jlbriggs/o4abatfo/11/
I asked the same thing in the Highcharts forum and got this solution as a reply from #paweł-fus:
var chartExtraMargin = 30;
Highcharts.wrap(Highcharts.Axis.prototype, 'setAxisSize', function (p) {
p.call(this);
if (this.isXAxis) {
this.left += chartExtraMargin;
this.width -= chartExtraMargin;
this.len = Math.max(this.horiz ? this.width : this.height, 0);
this.pos = this.horiz ? this.left : this.top;
}
});
However, adding this made the tooltips appear in the wrong position. This was fixed by overriding the Tooltip.prototype.getAnchor() method and adding the extra margin in the x coordinate:
Highcharts.wrap(Highcharts.Tooltip.prototype, 'getAnchor', function(p, points, mouseEvent) {
var anchor = p.call(this, points, mouseEvent);
anchor[0] += chartExtraMargin;
return anchor;
});
I am building a pie chart where the labels for the data points can very greatly in length, the legend is configured to be vertical and positioned on the left side.
I have added a label element to the bottom of the chart that shows the total of all data points.
The problem I am facing is that the positioning of this label (via the style element) is based on how wide the legend is, which occasionally if the legend is wide enough will be pushed off the right side of the chart.
Does anyone know of a way that I can style this label so that is positioned based solely on the width of the entire chart.
Here is the styling applied to the label (I tried adding the position value but this didn't appear to do anything):
style: {
top: '325px',
position: 'absolute',
left: '-160px',
'font-size': '175%'
}
Here is an example of the chart that I'm working with, you can see that the value for the total has bee cut off.
EDIT:
As per Sebastian's comment I was able to effectively solve the issue by using the legend label formatter to limit the length of the series names. Here is the code:
labelFormatter: function () {
var formattedName = this.name;
if (formattedName.length > 17) {
formattedName = formattedName.substr(0, 14) + '...';
}
return formattedName;
}
Have you tried to use labelFormatter http://api.highcharts.com/highcharts#legend.labelFormatter ?
Basically i want to use pointPadding with custom bar width (pointWidth) both at the same time. But i can't, here is my problem:
I want a chart with no-padding in the bars of one group when showing grouped chart. For this purpose i used pointPadding: "0" and it shows me exactly right chart. like:
if(chart_json.chart.defaultSeriesType=='column'){
if(chart_json.xAxis.categories.length >= 1 ){
chart_json.plotOptions.column.groupPadding = "0.05";
chart_json.plotOptions.column.pointPadding = "0.00";
}
}
var chart=new Highcharts.Chart(chart_json,startupObj.startupFunction);
chartObjArray.push(chart);
But when i set my custom width it adds some spaces in between bars of one group.
Actually i want to put max and min limit on bar width, but i can't find any support from Highchart library. So for this purpose when highchart generate the chart, if the generated chart bar width exceeds my max-limit i set it to my max-limit and same for lower limit.
if(chart_json.chart.defaultSeriesType=='column'){
if(chart_json.xAxis.categories.length >= 1 ){
chart_json.plotOptions.column.groupPadding = "0.05";
chart_json.plotOptions.column.pointPadding = "0.00";
}
}
var chart=new Highcharts.Chart(chart_json,startupObj.startupFunction);
chartObjArray.push(chart);
//set bar width
if(chart_json.chart.defaultSeriesType=='column' || chart_json.chart.defaultSeriesType=='bar'){
setChartBarMaxMinWidth(chart,chart_json);
}
setChartContainerWidth(chart_json,chart);
////************************************///////////////////
function setChartBarMaxMinWidth(chart,json){
var maximumBarWidth=70;
var minimumBarWidth=15;
chart_json=eval('('+json.chart_json+')');
for(var j=0;j<chart.series.length;j++){
var series=chart.series[j];
if (series.data[0].pointWidth > maximumBarWidth) {
chart.series[j].options.pointWidth = maximumBarWidth;
isMaxMin='MAX';
}
if (series.data[0].pointWidth < minimumBarWidth) {
chart.series[j].options.pointWidth = minimumBarWidth;
isMaxMin='MIN';
}
};
function setChartContainerWidth(chartOptions,chart){
// calculate # of bars
var numberOfBars=seriesGroupLength*categoriesLength;
// calculate container width
// var containerWidth=numberOfBars*43;
// get chart bar width
var containerWidth=numberOfBars*barWidth;
chart.setSize($(container).width(),$(container).height());
};
In setChartContainerWidth() i used highchart setSize() method to resize chart..
Thanks if someone can help me to remove spaces in between bars of one group.
Thanks
I used the spacingTop attribute to enforce a maximum pointWidth:
if (series[0].data[0].pointWidth > maximumBarWidth) {
this.options.chart.spacingTop = this.options.chart.height - (maximumBarWidth * series.length) - 30;
this.isDirtyBox = true;
this.redraw();
}
So if there is one Bar over a certain Width the spacing will be adjusted and the chart is drawn smaller.
This does not change the size of the container but keeps the bars beneath a certain size and your pointPadding and groupPadding will not be affected.
You will have to adjust the calculation of the spacingTop depending on your data structure and the size of your axis titles.