We Keep Coding

How to use stacked bar chart with no space between bars which are one over another in a vertical chart?

I have a Plotly.js chart and there is a minor design issue described below with screenshots.
This is how it looks like right now:
And this is how it looks with layout.bargap set to 0:
I would like to keep the horizontal spacing but without the vertical spacing between the bars that are one over another.
What I have tried
I have tried setting layout.bargroupgap to 0 but it has no effect in this context.
I also tried these things but they did not work as I wished:
this.context.updateContainer({
// 'marker.line.color': '#000',
// 'marker.line.width': -1, // or 0
// 'selected.marker.opacity': 0,
// 'unselected.marker.opacity': 0,
});
The project on which I am working is here but I do not know what part of it is of interest.
There are no error messages.
Thank you.

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:-)

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 :)

morris.js dashed grid lines

I am trying to customize the grid lines for morris.js to have a dashed style similiar to the revenue graph in http://dribbble.com/shots/947782-Freebie-PSD-Flat-UI-Kit/attachments/107093, Is this even possible? It seems that the documentation is not very complete, gridLineColor is not listed as an option yet it does change the color when I add it to my graph. Morris.js seemed to be highly recommended but I cant seem to adjust simple things like this.
I would also like to have each grid line the same weight and not have the center line emphasized while the others lighter. I cant seem to find anything in the documentation for that either.
Thanks for any help!

There doesn't seem to be an option yet for this in morris.js but I was able to edit the uncompressed morris.js file to add an option for dashed grid lines. Simply add .attr('stroke-dasharray', this.options.gridDashed) to the end of line 508. You can then add the option gridDashed: '--' to the graphs you would like dashed grid lines on!

Here is the line that needed changing in Graeme's answer:
Grid.prototype.drawGridLine = function(path) {
return this.raphael.path(path).attr('stroke', this.options.gridLineColor).attr('stroke-width', this.options.gridStrokeWidth).attr('stroke-dasharray', this.options.gridDashed);
};

jqplot pie chart legend width

I'm trying to render the legend of a pie chart so that it has a fixed width, and when the labels reach that width (the div holder) to hyphenate on the next line. I tried the row option but it doesn't work very well because my data is dynamic and at times i have say 3 data sets, and each one of them gets rendered in a separate row, while at other times i have 15-20 data sets and it becomes messy.
Anyway the solution is to restrain the legend to the width of the div, that it is rendered into, yet it doesn't seem to be accepting any css alterations. I tried adding width:250px; to the "jqplot-table-legend" in jqPlot css, i also tried adding it into various places using Inspect Element in Chrome to test whether it works, but it doesn't seem to accept the new width. I also tried to hard code it into the javascript file at various places with no luck.
I'm not sure what I can add to the question in terms of code. Everything is pretty standard on the jqPlot side.
Any suggestions on how to get around this will be much appreciated.

This seems like the quick and dirty way, but it gets the job done. I'll use the jqplot.pieRenderer.js file as the example since it's easier to read than the minified version. Open the js file and scroll down to line 568. Right under
this._elem = $(document.createElement('table'));
this._elem.addClass('jqplot-table-legend');
add
this._elem.css({width: 300});
That will stretch the table out to whatever width you need it to be. Unfortunately, it also stretches out the column with the color swatch so you'll now need to scroll down a little further until you find
td1.css({textAlign: 'center', paddingTop: rs});
change that to
td1.css({width: 16, textAlign: 'center', paddingTop: rs});
and you should be all set.

Another method:
Just add these lines:
if (this.width) {
ss['width'] = this.width;
}
They allow you to set an arbitrary width in each different graph
You might also want to add these lines in jquery.jqplot.js (i.e if rendering bars)
Search for "createElement('table')" as described by mike
Worked for me