CODEWITHSUNDEEP
javascriptd3.jschartsbar-chartlinechart
vdiaz1130
vdiaz1130

Reputation: 311

D3 Bar and Linear Chart With Multiple Axis

I'm working on a D3 bar chart that requires a superimposed line chart. I'm having trouble getting the line chart over it.

Final chart should look like this: This is what I would like the final chart to look like - note the yellow line chart.

Here is a work-in-progress jsfiddle. https://jsfiddle.net/t05qffo5/1/

Here's the code for the line chart I'm having trouble with. Just not sure how to make it work.

var line = d3.svg.line()
    .x(function(d) {return d[2];})
    .y(function(d) {return d[2];})
    .interpolate('linear');

var linePath = svg.append('path')
    .attr({
        'd': line(chartData),
        'stroke': 'yellow',
        'stroke-width': 2,
        'fill': 'none'
    });

Any help getting the line chart to show up as in the image is greatly appreciated.

Thanks!

Upvotes: 2

Views: 2385

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

First you need to make a line function:

 var line = d3.svg.line()
              .x(function(d) {
                //so that the line is from the middle of the bar
                //here xScale.rangeBand() is the width of the bar
                return x(d) + xScale.rangeBand() + xScale.rangeBand()/2;
              })
              .y(function(d) {
                return y(d)+margin.top ;
              })
              .interpolate('linear');

Next is you make line:

  var linePath = svg.append('path')
    .attr({
        'd': line(data),//use the above line function
        'stroke': 'red',
        'stroke-width': 2,
        'fill': 'none'
    });

Working code here

Hope this helps!

Upvotes: 3

Related Questions