I have this chart:
I have 2 issues:
How can I make the bars thicker and add space between them because they are so small that they blend in each other.
As you can see in the photo, the highest value is 3 but how can I stop the chart after that so there is no blank space like in the photo between 3 and 4.
Thank you very much!
Reduce pointPadding and groupPadding properties or increase chart's height.
Set yAxis.maxPadding to 0:
yAxis: {
...,
maxPadding: 0
}
Live demo: http://jsfiddle.net/BlackLabel/s3c7yz2w/
API Reference:
https://api.highcharts.com/highstock/series.column.pointPadding
https://api.highcharts.com/highstock/series.column.groupPadding
https://api.highcharts.com/highstock/chart.height
https://api.highcharts.com/highstock/yAxis.maxPadding
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:
I am using Highcharts area graph.
The type of the chart is "datetime".
The X-Axis labels get well adjusted as long as
Either the width of the chart container div is less than 900px
Or the width is not specified for the div
When I set the width of the container of the div more than 900px, either the labels are appended with the dots or get overlapped.
How it can be resolved. Thanks in advance for any suggestion or help.
You can add the tickInterval option to the x-Axis. This option determines the distance between the individual ticks. For example setting it to
tickInterval: 24*3600*1000
which resembles on day in milliseconds yields no overlapping labels for your chart:
https://jsfiddle.net/doc_snyder/mwzd1rc8/1/
You can also use a new option provided below by highcharts if you are comfortable with showing the labels in 2 or more lines and if you do not want rotated labels.
staggerLines: 2
https://jsfiddle.net/bhavinpatel/153eh40z/
I am trying to create a thin Donut chart using HighCharts. I've read that If I set series.innerSize to be a slightly smaller value than series.size, I can get a thin circle. This only works to a certain extent though. No matter how close I make these values, the width of the circle border is still around 10 pixels. I'd like it to be more like three.
Can this be done?
I can get the circle to be thinner if I set the stroke-width property of the .highcharts-series path selector, but then the two segments of my donut no longer connect.
It's probably easier just to look at the jsfiddle I created: http://jsfiddle.net/bergonom/3BsYJ/
Note that I need the charts to be fairly small (like less than 100px x 100px), as shown in the fiddle.
Thanks for your help.
You can get the effect you want by specifying the sizes in pixels rather than percentages. e.g.
series: [{
data: testData,
name: "",
size: 50,
innerSize: 47,
pointPadding: 0,
groupPadding: 0
}],
http://jsfiddle.net/mMH2Z/
I have the following problem. If no max value is defined Highcharts always adds space at the end of the bar. To illustrate it I've attached a image. The blue area is the div the chart is inside and I want the bars with 100% end on the end of the blue area. I'm aware of it that I can achive this by setting max:1 on the axis but I'm looking for a dynamic approach since when I'm defining max it is fixed and if the maximum value in the Chart is 80% I again end up with unused space.
Thanks Sebastian
You should set max as 100 for yAxis, not 1.
EDIT:
set maxPadding as 0 and endOnTick as true
http://jsfiddle.net/Km8CK/4/
http://api.highcharts.com/highcharts#xAxis.maxPadding
http://api.highcharts.com/highcharts#xAxis.endOnTick
Set your maxPadding to 0, and endOnTick to false.
example: http://jsfiddle.net/Km8CK/6/
maxPadding:0,
endOnTick:false,