TL;DR Q: How do I force the fixed width of bar's border in Highstocks?
I need to display a histogram using Highcharts. I'd like to look it like this:
that is, no spaces between the bars, and the fixed width border.
Now I've tried to do the same with Highcharts, but it seems that some of the bars overlap each other, and the border width is not constant:
Here are the (significant) config options:
plotOptions: {
series : {
pointPadding : 0,
groupPadding : 0,
shadow : false,
borderWidth : 1,
borderColor : 'black'
}
}
What am I doing wrong?
The problem is not the gridLineWidth. You've set that correctly.
In addition you need to set the minorGridLineWidth that you have to set to 0
similar demo:
http://jsfiddle.net/P2Mv2/1/
Related
I have one dataset with multiple labels in my bar chart. When bar chart has more labels, width of label shrink for each.
I want to set fixed width for every window in my chart. For example dark stick for every label should be same fixed width size no matter how many window exists.
Thank in advance.
Is it a request to have the vertical axis have a fixed width?
There is a way to do this:
options: {
scales: {
yAxes: [{
afterFit: function(scaleInstance) {
scaleInstance.width = 100; // sets the width to 100px
}
}]
}
}
I am using Chart.js as my charting library. I have created horizontalBar chart.
I need to set the width of individual bar in the chart.
I did not found anything specific in chartjs documentation but while looking at source code I found the option barThickness which is setting the fixed bar width
But as number of rows increase, instead of increasing the height of the chart, the bar are colliding with each other. Please check fiddle for example:
https://jsfiddle.net/orhp0zLg/
Is there any way we can increase the height of the chart instead of letting the bars collide with each other?
The barThickness property is a fixed width, as you noticed in your issue.
However, you have an other property called barPercentage which is a multiplier of the max width of your bars.
You should set berPercentage to a value (let's say 0.95) and you'll always have the same format, no matter how many bars you have :
options: {
scales: {
yAxes: [{
barPercentage: 0.95,
}]
}
}
Here is your updated fiddle with the fix and here are the results with first 7 values and then 12 :
In Highcharts, I'd like to put the y-axis title at the top and have it left-aligned with the y-axis labels.
I've tried this:
$('#container').highcharts({
...
yAxis: {
...
title: {
align: 'high',
text: 'Y-axis title',
rotation: 0,
y: -10,
//To left-align title with labels
textAlign: 'left', //This is undocumented, but appears to work
margin: 0
}
}
})
However, I get an excessive left margin which seems to be proportional to the length of the y-axis title.
JsFiddle
It looks like the margin calculation doesn't take into account the textAlign: 'left' setting.
UPDATE: I should say that my current "solution" is to set a margin with chart.marginLeft but that's not ideal because it's fixed. The left margin should be just big enough to accommodate the axis labels (however big they might be).
How can I left-align the y-axis title with the labels and have a reasonable left margin?
I decided to use marginLeft (yes, you read that correctly), but based on the length of your axis label, to provide the needed flexibility.
What I did here is set your chart options to a variable called chartOptions. I then calculated the length (number of characters) of the axis title, set the marginLeft property based on that value, and then drew the chart with the amended chart options.
chartOptions.chart.marginLeft = chartOptions.yAxis.title.text.length;
var chart = $('#container').highcharts(chartOptions);
Here's the working fiddle: http://jsfiddle.net/brightmatrix/6eeuay58/9/
I tested it with different numbers by increasing some of your data points.
Please let me know if this is useful and helpful for you.
http://jsfiddle.net/sgrg93/brev29jg/
legend:{
borderWidth: 1,
width: 300 //to increase the width of legend more than that of ColorAxis
},
In the above fiddle, width of the legend is more than that of the ColorAxis. The ColorAxis is left aligned within the legend. Is there any way to align the ColorAxis to the center or the right within the legend box?
I don't want to use
this.legend.contentGroup.translate(50,0)
on load() event of chart
Sure, you can alter the object 'legend' to disable it with:
legend:{
enabled: false
}
Is there a reason you need the whitespace at all?
If you remove the width property, you could simply make the surrounding box the correct size for your legend, as so:
legend:{
borderWidth:1
//width:300
},
http://jsfiddle.net/brev29jg/1/
It's possible to set the width of the chart "area" ?
I mean not the whole chart only the part with curves.
Or maybe an other solution is to set the x-axis width.
Regards
Indeed, you can set for xAxis width that way:
xAxis: [{
width: 200
}]