title: line graph spot in the top middle of the bar graph
body: <p>I have created a combo dual bar graph using chartjs. My code is given below. The bar combo dual graph is working fine but I had got a requirement to put a line for the green color bar graph which connects all its top mid points. I have somewhat drew a line graph connecting the green graph but the problem which I am facing is that the line graph spot point is not in the top middle of the green bar graph like as shown below.</p>
  
  <p>Can anyone please tell me how to make the line spot in the top middle of the bar graph</p>
  
  <p><a href="https://i.stack.imgur.com/2K4hV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2K4hV.png" alt="![enter image description here"></a></p>
  
  <p><strong><a href="http://plnkr.co/edit/lETsyOckH7Q0Sdylc6Tk?p=preview" rel="noreferrer">Working Demo</a></strong></p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code>var barChartData = {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [{
              type: 'bar',
                label: "Visitor",
                  data: [10, 59, 340, 521, 450, 200, 195],
                  fill: false,
                  backgroundColor: "rgba(220,220,220,0.5)",
                  borderColor: '#71B37C',
                  hoverBackgroundColor: '#71B37C',
                  hoverBorderColor: '#71B37C'
  
          }, {
              type: 'bar',
                label: "Visitor",
                  data: [200, 185, 590, 621, 250, 400, 95],
                  fill: false,
                  backgroundColor: '#71B37C',
                  borderColor: '#71B37C',
                  hoverBackgroundColor: '#71B37C',
                  hoverBorderColor: '#71B37C'
  
          }, {
  
                  type:'line',
                  data: [200, 185, 590, 621, 250, 400, 95],
                  fill: false,
                  borderColor: '#EC932F',
                  backgroundColor: '#EC932F',
                  pointBorderColor: '#EC932F',
                  pointBackgroundColor: '#EC932F',
                  pointHoverBackgroundColor: '#EC932F',
                  pointHoverBorderColor: '#EC932F'
  
          } ]
      };
  
      window.onload = function() {
          var ctx = document.getElementById("canvas").getContext("2d");
          window.myBar = new Chart(ctx, {
              type: 'bar',
              data: barChartData,
              options: {
              responsive: true,
              tooltips: {
                mode: 'label'
            },
            elements: {
              line: {
                  fill: false
              }
          },
            scales: {
              xAxes: [{
                  display: true,
                  gridLines: {
                      display: false
                  },
                  labels: {
                      show: true,
                  }
              }],
              yAxes: [{
                  type: "linear",
                  display: true,
                  position: "left",
                  id: "y-axis-1",
                  gridLines:{
                      display: false
                  },
                  labels: {
                      show:true,
  
                  }
              }, {
                  type: "linear",
                  display: true,
                  position: "right",
                  id: "y-axis-2",
                  gridLines:{
                      display: false
                  },
                  labels: {
                      show:true,
  
                  }
              }]
          }
          }
          });
      };
  </code></pre>