We Keep Coding

Thickness of a bar chart

I've been using plot.ly's JavaScript API for a project I've been working on, and I would like to replicate the following chart:
I've been able to plot it using a bar chart, but the thickness is too great. How can I adjust this accordingly?
Thank you.

I think the layout attribute bargap does the trick. It defines the gap between the bars and make the bars itself smaller.
So add it to your layout like this and it should work:
var layout={
bargap: 0.98
}
I created an example for you on jsFiddle:
https://jsfiddle.net/7y3djdsj/
hope it helps:-)

Chart.js margins

I'd like to know how to access the left and right margins of a chart in Chart.js.
Looking for something like "chart.canvas.marginLeft".
Thanks!

With
var chart = new Chart(ctx).Line(data);
the following will get you your 'margins'
alert(chart.scale.xScalePaddingLeft);
alert(chart.scale.xScalePaddingRight);

Highcharts paint zero axis black

I have a Highchart bar chart with negative values (with the bars then going downwards). Now I would like to paint a black line for y=0 like so: .
I haven't found a trivial way to do this and I would like to avoid directly modifing the SVG or adding a fake line chart or something. Maybe someone knows better way? I've already played around with (minor)tickInterval and (minor)gridLineColor but that wouldn't solve my problem.

you can use plot lines for this like shown in this example http://jsfiddle.net/4rpNU/
yAxis:{
plotLines:{}
}
here is the api reference for it http://api.highcharts.com/highcharts#yAxis.plotLines
Hope this will be useful for you :)

d3.js - blank object when applying y-axis scale

I'm trying to apply a scale to y-axis in my chart, but when I do it I get a blank svg object.
I did the same thing with the x-axis and it's working fine.
Problem happens when you uncomment this section
// .y(function(d) {
// return yScale(d[1])
// })
http://jsfiddle.net/MgwR5/1/
Could anyone tell me what I'm doing wrong?

The area functions are y0() and y1(), not y(). Ref: D3 API documentation

Have a look at the js bin. I've put a bunch of comments in that should help and I've assumed that you wanted a line chart.
If you want to put axis's on your chart you should be looking to use the d3.svg.axis function. It does most of the heavy lifting for you. You also need to make space for the axis try using some padding and margins (you might want to look at this example or the example on the js bin d3 page - use the link at the top of the google groups d3 page). You also probably want to separate out your axis's and your plot by using svg's group ('g').
Cheers

Highcharts problems: variable legend height

I have to set the height & width of the Highcharts placeholder. But the data to be displayed is variable. When the series names(long name) come to much more. The lengend height grows too high and hide the chart.
How could I solve this problem? Hoping to get some help.

I faced the same issue as you have mentioned. I was setting chart height and marginBottom property for the chart. I removed the marginBotton property and its working fine. AS your legend grows, the chart canvas area gets adjusted by itself and the legend does not overlap with the plot area

After your chart loads.. put this in your code..
$('.highcharts-legend').attr('transform', 'translate(50,400)')
But It will still move if you resize the browser...
Ill let you know if I figure it out..

As you can see here the release 2.2.4 introduces legend paging.
You can custom it following the reference.

As you add your series to the chart just stop adding them to the legend after a certain point (eg after 5) with the following option:
showInLegend: false
docs: http://www.highcharts.com/ref/#plotOptions-series
demo: http://jsfiddle.net/7Mmee/14/

see this jfiddle link.this is fiddle and highchart links
http://jsfiddle.net/highcharts/B9L2b/
I think this will solve your problem.