How to combine Box plot graph with line graph in nvd3

Question

enter image description here

Hi,

I have got a requirement to combine Boxplot chart with the line charts. I am using nvd3 library. I want to add two line charts in the same graph, one line will tell the avg and other will tell the current status. Can anyone please help me to achieve this functionality?

Thanks in advance!

configureChart = () => {
  this.user_story_options = {
    chart: {
      type: 'boxPlotChart',
      height: 450,
      margin: {
        top: 20,
        right: 20,
        bottom: 60,
        left: 40
      },
      color: ['darkblue', 'darkorange', 'green', 'darkred', 'darkviolet'],
      x: function(d) {
        return d.label;
      },
      // y: function(d){return d.values.Q3;},
      maxBoxWidth: 75,
      yDomain: [0, 500]
    }
  };
}

getData = () => {
  this.user_story_data = [{
      label: 1,
      values: {
        Q1: 180,
        Q2: 200,
        Q3: 250,
        whisker_low: 115,
        whisker_high: 400,
        outliers: [50, 100, 425]
      }
    },
    {
      label: 2,
      values: {
        Q1: 300,
        Q2: 350,
        Q3: 400,
        whisker_low: 225,
        whisker_high: 425,
        outliers: [175, 450, 480]
      }
    },
    {
      label: 3,
      values: {
        Q1: 100,
        Q2: 200,
        Q3: 300,
        whisker_low: 25,
        whisker_high: 400,
        outliers: [450, 475]
      }
    },
    {
      label: 4,
      values: {
        Q1: 75,
        Q2: 100,
        Q3: 125,
        whisker_low: 50,
        whisker_high: 300,
        outliers: [450]
      }
    },
    {
      label: 5,
      values: {
        Q1: 325,
        Q2: 400,
        Q3: 425,
        whisker_low: 225,
        whisker_high: 475,
        outliers: [50, 100, 200]
      }
    }
  ];
}

<div class="container-fluid">
  <nvd3 #userStoryNvd3 [options]="user_story_options" [data]="user_story_data"></nvd3>
</div>

Answer 1

I've implemented the requirement using d3.

https://github.com/Dhiraj1411/box-plot-combined-with-line-chart