Develop Reference

highcharts.js column/bar overlap (datetime Xaxis)

I have trouble to make my Highchart work properly for my usage.
I have a datetime axis with "column/bar" display and multiple series. The problem is that the series "overlap" on each other, making it complicated to read (the mouseover is complicated because series hide each other).
You can see what it does here : https://jsfiddle.net/okbguc03/3/
I just would like to prevent overlapping (i guess highchart would have to "stretch time" in order to display the bar on side of each other).
I've tryed playing with "padding" and "pointwidth" and i've disabled stacking, but it doesn't help (and i need pointwidth because the bars are very thin).
"plotOptions": {
"column": {
"stacking": "null",
pointWidth : 10
},
Thanks in advance for your help =)

The answer seems to be that you can't force highcharts to disable overlap and the line chart is the best display for this kind of data

Highcharts: Add ONE custom label to yAxis

I'm using highcharts and I know that the yAxis labels are automatically generated.
The thing is I've got this 3D graph in which apart from the data, there's a fixed 'goal' line on which we compare which data set is over or under it.
Since 3D graphs don't render lines very well, I used a plotLine and it works marvelous. The problem comes when I try to show how much this 'goal' is, because even though it's at the right position, it would be nice to display this goal amount.
What I want to do is display at the left of the graph the value of this line, so that whoever sees it is able to know how much the goal is for that particular data set.
Here's a screenshot of the graph, and circled the place I want to add the custom label:
Graph screenshot
Inside the red circle is where I want to add this custom string (which should be a percentage number).
I appreciate any help you guys can provide. Thanks!

You should be able to use renderer.text for adding custom text in your chart.
http://api.highcharts.com/highcharts/Renderer.text
load: function() {
var chart = this,
yAxis = chart.yAxis[0],
plotLine = yAxis.plotLinesAndBands[0],
pLPath = plotLine.svgElem.d;
chart.renderer.text('CUSTOM LABEL', parseFloat(pLPath.split(' ')[7]) - 100, parseFloat(pLPath.split(' ')[8])).addClass('cT').attr({
fill: 'red'
}).add();
},
In the code above I am using plotLine's path.
Live example how your chart may work:
http://jsfiddle.net/0hyaevax/2/

KendoUI Bar Chart - PlotArea Not Working As Assumed

I have a Bar chart that is showing one single bar. My intention is to have this as a sliver at the top of my page. It is a breakdown of time spent by each partner in the process for the given page I am on.
The issue I am having is the PlotArea (my assumption, the entire rectangle of canvas to work on) which I have made green in the this fiddle. The multi-colored bar is really all I want to see. I am trying to remove the green completely. So once it works, no matter what I set the following to:
'chartArea' : {
'height' : 100,
'margin' : 0
},
it makes the colored bar that height with no green area.

Set the plotArea margin to -100
'plotArea': { 'margin': -100,background: "green" },
I agree that seems like strange behavior! This may need to change depending on the height of the chartArea.

Did Morris.js Bar Chart change the bar width?

As Title.
I want to change the width of bar chart.
Like this http://imgur.com/W4mXw8W
Change to this http://imgur.com/GuD51aS
I search the document , but I cant Find the option to change it.
Any suggestion ?
Thanks

I know this is old bu this is what helped me in the same case as above:
barSizeRatio: 1

How to change the layout of google pie chart with label?

Hi I need to modify google chart. Where the labels are to be at bottom with two columns.
What i have :
What i Need:
I tried Label : {position: 'bottom', maxLines: 5}
but it says maxlines only works with position : top .
Please let me know if this is possible.
Thanks