title: D3 chart with dual axis and group bar
body: <p>i am trying to use D3 bar chart with dual axis and grouping  chart
  having 3 data field
  1 name
  2 qty
  3 linenetamount</p>
  <p>my data is coming from API but for sample data we can have -</p>
  <pre><code>name,qty,linenetamount
  a1,12,345
  a2,45,546
  a3,87,5555
  a4,444,66789
  </code></pre>
  <p>Please have look on my js part of code -  .................................</p>
  <pre><code>                var margin = { top: 20, right: 40, bottom: 30, left: 40 },
                 width = 980 - margin.left - margin.right,
                 height = 500 - margin.top - margin.bottom;
                    var x0 = d3.scale.ordinal().rangeRoundBands([0, width], .4);
                    var x1 = d3.scale.ordinal();
                    var y0 = d3.scale.linear().range([height, 0]);
                    var y1 = d3.scale.linear().range([height, 0]);
      
                    var color = d3.scale.ordinal().range([&quot;#98abc5&quot;, &quot;#d0743c&quot;]);
      
                    var xAxis = d3.svg.axis()
                        .scale(x0)
                        .orient(&quot;bottom&quot;)
                        .ticks(5);
      
                    var yAxisLeft = d3.svg.axis()
                        .scale(y0)
                        .orient(&quot;left&quot;)
                        .tickFormat(function (d) { return parseInt(d) });
      
                    var yAxisRight = d3.svg.axis()
                        .scale(y1)
                        .orient(&quot;right&quot;)
                        .tickFormat(function (d) { return parseInt(d) });
      
                    var svg = d3.select($el[0]).append(&quot;svg&quot;)
                        .attr(&quot;width&quot;, width + margin.left + margin.right)
                        .attr(&quot;height&quot;, height + margin.top + margin.bottom)
                      .append(&quot;g&quot;)
                        .attr(&quot;transform&quot;, &quot;translate(&quot; + margin.left + &quot;,&quot; + margin.top + &quot;)&quot;);
      
      
                    x0.domain(data.map(function (d) { return d.name; }));
                    x1.domain(['qty', 'linenetamount']).rangeRoundBands([0, x0.rangeBand()]);
      
                    y0.domain([0, d3.max(data, function (d) { return d.qty; })]);
                    y1.domain([0, d3.max(data, function (d) { return d.linenetamount; })]);
      
                    // Ticks on x-axis and y-axis
                    svg.append(&quot;g&quot;)
                        .attr(&quot;class&quot;, &quot;x axis&quot;)
                        .attr(&quot;transform&quot;, &quot;translate(0,&quot; + height + &quot;)&quot;)
                        .call(xAxis);
      
                    svg.append(&quot;g&quot;)
                        .attr(&quot;class&quot;, &quot;y0 axis&quot;)
                        .call(yAxisLeft)
                      .append(&quot;text&quot;)
                        .attr(&quot;transform&quot;, &quot;rotate(-90)&quot;)
                        .attr(&quot;y&quot;, 6)
                        .attr(&quot;dy&quot;, &quot;.71em&quot;)
                        .style(&quot;text-anchor&quot;, &quot;end&quot;)
                        .style(&quot;fill&quot;, &quot;#98abc5&quot;)
                        .text(&quot;qty&quot;);
      
                    svg.select('.y0.axis')
                      .selectAll('.tick')
                        .style(&quot;fill&quot;, &quot;#98abc5&quot;);
      
                    svg.append(&quot;g&quot;)
                        .attr(&quot;class&quot;, &quot;y1 axis&quot;)
                        .attr(&quot;transform&quot;, &quot;translate(&quot; + width + &quot;,0)&quot;)
                        .call(yAxisRight)
                      .append(&quot;text&quot;)
                        .attr(&quot;transform&quot;, &quot;rotate(-90)&quot;)
                        .attr(&quot;y&quot;, -16)
                        .attr(&quot;dy&quot;, &quot;.71em&quot;)
                        .style(&quot;text-anchor&quot;, &quot;end&quot;)
                        .style(&quot;fill&quot;, &quot;#d0743c&quot;)
                        .text(&quot;linenetamount&quot;);
      
                    svg.select('.y1.axis')
                      .selectAll('.tick')
                        .style(&quot;fill&quot;, &quot;#d0743c&quot;);
                    // End ticks
      
                    var graph = svg.selectAll(&quot;bar&quot;)
                        .data(data)
                        .enter()
                        .append(&quot;g&quot;)
                          .attr(&quot;class&quot;, &quot;g&quot;)
                          .attr(&quot;transform&quot;, function (d) { return &quot;translate(&quot; + x0(d.name) + &quot;,0)&quot;; });
      
                    graph.selectAll(&quot;rect&quot;)
                        .data(data)
                        .enter()
                        .append(&quot;rect&quot;)
                          .attr(&quot;width&quot;, x1.rangeBand())
                          .attr(&quot;x&quot;, function (d) { return x1(d.name); })
                          .attr(&quot;y&quot;, function (d) { return y0(d.qty); })
                          .attr(&quot;height&quot;, function (d) { return height - y0(d.qty); })
                          .style(&quot;fill&quot;, function (d) { return color(d.name); });
      
                    // Legend
                    var legend = svg.selectAll(&quot;.legend&quot;)
                        .data(['qty', 'linenetamount'].slice())
                        .enter()
                        .append(&quot;g&quot;)
                          .attr(&quot;class&quot;, &quot;legend&quot;)
                          .attr(&quot;transform&quot;, function (d, i) { return &quot;translate(0,&quot; + i * 20 + &quot;)&quot;; });
      
                    legend.append(&quot;rect&quot;)
                        .attr(&quot;x&quot;, width - 48)
                        .attr(&quot;width&quot;, 18)
                        .attr(&quot;height&quot;, 18)
                        .style(&quot;fill&quot;, color);
      
                    legend.append(&quot;text&quot;)
                        .attr(&quot;x&quot;, width - 54)
                        .attr(&quot;y&quot;, 9)
                        .attr(&quot;dy&quot;, &quot;.35em&quot;)
                        .style(&quot;text-anchor&quot;, &quot;end&quot;)
                        .text(function (d) { return d; });
  </code></pre>
  <p>its generating the chart  with dual axis but my bar value is same for all record .
  <a href="https://i.stack.imgur.com/9hkXk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9hkXk.png" alt="enter image description here" /></a></p>
  <p>any suggestion to solve this issue .
  thanks .</p>