We Keep Coding

How can I create a pie/gauge chart showing the lines between the bar gaps with recharts?

I would like to create a semi circle chart showing both the bars information and the information between the bar gaps.
Today the chart looks like this:
stability_graph_before
But I would like to have something like:
stability_graph_after
It's possible to do this using recharts lib?

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

D3.js redraw chart after brushing

I am working on a D3.js chart where I would like to brush on a timeline. I stucked when I want to redraw the chart with the new data.
´function brushed() {
var startDate=new Date(brush.extent()[0]);
var endDate=new Date(brush.extent()[1]);
var newDates=[];
var i=0;
while(JSONdata.measurementPoints[i].measurementDateTime<=endDate){
if(JSONdata.measurementPoints[i].measurementDateTime>=startDate){
newDates.push(JSONdata.measurementPoints[i].measurementDateTime);
}
i++;
}
if(newDates.length>0){
chart.select('path').attr('d',pathGenerator(newDates));
chart.select(".x.axis").call(xAxis);
}
}´
My problem is that after I change the data on the element the whole graph disappear. I am pretty rookie in D3.js and dont really know if this is the best way to achive this functionality.
I appreciate any suggestion.
Code: http://codepen.io/laczko090/pen/ozJANP?editors=1010
Thanks in advance!

You need to redraw the main graph line and axes in brushed.
Modified CodePen
Save a reference to the graph line's path:
var path = series.append('path')
.attr('vector-effect', 'non-scaling-stroke')
[...]
In brushed, redraw:
path.attr('d', pathGenerator(dates));
xAxis.scale(xScale);
xAxisEl.call(xAxis);

D3 Horizontal Bar Chart exact copy

Just started working with d3 and need to make a horizontal bar chart exactly like the one in the image for a project. Any help would be appreciated. Thanks.
Image of bar chart
So far I have been working through this example and trying to adapt it to look like what I need.

This will get you started....
You can replace the data with some json or something
data = [
{label:"new", value:10},
{label:"repeat", value:55},
{label:"loyal", value:35},
];
http://plnkr.co/edit/uzRkw1bNZfQDFfQsOh4t?p=preview

Please find the below link to start the horizontal bar chart. it's in d3.v4 version.
change the graph margin to reduce the size of svg
HorizontalBarChart

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.