Hi I'd like a 1px gray line in between each horizontal bar.... (keeping the bars the same thickness)
http://jsfiddle.net/gpaosxwe/1/
I've had a brief try of
grid
and
tick
though I might have overlooked something...
You can do this with the following combination of properties:
categories:[],
gridLineWidth:1,
tickInterval:1,
tickmarkPlacement:'between',
(tickmarkPlacement is key, which only works for categorized axes)
Example:
http://jsfiddle.net/jlbriggs/gpaosxwe/6/
References:
http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement
http://api.highcharts.com/highcharts#xAxis.gridLineWidth
http://api.highcharts.com/highcharts#xAxis.gridLineColor
http://api.highcharts.com/highcharts#xAxis.tickInterval
What you are looking for is borderWidth, pointPadding and groupPadding. You could do something like :
plotOptions: {
bar: {
borderWidth: 1, //Define a border of 1px to each bars
pointPadding: 0, //Define space between two bars
groupPadding: 0, // Define space between each value groups
...
},
...
}
See JSFiddle here.
Related
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
I have manipulated highcharts heatmap graph to suit some of my requirement. But I am not able to hide the tick lines on secondary y axis. Below is the jsfiddle link of what I have done. http://jsfiddle.net/sandeepkparashar/39xBU/389/389
Please suggest how to hide the tick lines.
Actually, those lines are grid lines and an axis line (the one in the bottom). You can disable them by setting their width to 0.
xAxis: {
lineWidth: 0
...
},
yAxis: {
gridLineWidth: 0,
...
}
example: http://jsfiddle.net/sebdom/39xBU/390/
Using Highstock or Highcharts, I want my yAxis label on the top. What I don't want, is a varying margin between the left border of the chart and the beginning of the grid lines.
If you take a look at the following fiddle:
JSFiddle
Relevant part is:
yAxis: {
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -10
}
}
This is almost correct, but the offset margin is taken from the label width. If I set offset: -41 instead, it looks exactly right. The problem is, that the -41 is due to the rendered length of the text. If I change the text to something of a different length, the label is positioned wrongly again.
Is there any possibility to make sure, that the positions are always "correct" in my above definition of correct, regardless of the text length?
Screenshot, left part is wrong, right part is correct:
I think that you can use text-anchor property to style your title. Here you can find more information about text-anchor property: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
title: {
align: 'high',
text: 'Rainfall (mm)',
style: {
'text-anchor': 'start'
},
rotation: 0,
y: -10,
x: -25
},
I think that you need to use chart.marginLeft parameter as well. It will give you a chance to set specific left margin for your chart. Here you can find information about it.
http://api.highcharts.com/highcharts#chart.marginLeft
You may also use xAxis.labels.reserveSpace parameter to turn off reserving space for labels: http://api.highcharts.com/highcharts#xAxis.labels.reserveSpace
Here you can find live example how your chart can work with this options:
http://jsfiddle.net/Ljwp7694/
Kind regards,
I have a bar chart with one group of five items. Strangely, the distance between the bars within the same group is different. I tried out almost all imaginable settings as on the references list, but in vain.
Here is the graph.
The PlotOptions code is this:
plotOptions:
{
series:
{
borderWidth: 0,
shadow: false,
pointWidth: 10
}
},
The problem is with pointWidth property - your chart is to small for that value, remove that or change to something like ~7.
How can i remove padding between my chart and plot. I want my chart to start from the edge of plot and end the same way, but no matter what I try, i cannot remove padding :(
Thanks!
You can do that with:
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0,
}
},
See working example at jsfiddle: https://jsfiddle.net/d9854qLm/.
Hope that is what you want.