title: Chart.js - Draw horizontal line on horizontal bar chart
body: <p>I'm trying to achieve the following chart but i am not able to build it.</p>
  
  <p><a href="https://i.stack.imgur.com/G1fEv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G1fEv.png" alt="enter image description here"></a></p>
  
  <p>I was trying with <a href="https://codepen.io/ccdanieljose/pen/NJEOQz" rel="nofollow noreferrer">this code</a> (using <a href="https://github.com/chartjs/chartjs-plugin-annotation" rel="nofollow noreferrer">https://github.com/chartjs/chartjs-plugin-annotation</a>) but i think the solution is not perfect. The value of line "Días meta" needs to be configurable, so the line must be re-drawn as its value changes and the horizontal bar's dataset also changes.</p>
  
  <p>The code:</p>
  
  <pre><code>&lt;script&gt;        
  
      var color = Chart.helpers.color;
      var horizontalBarChartData = {
          //labels: ['7', '6', '5', '4', '3', '2', '0'],
          labels: ['5', '3', '2', '1'],
          datasets: [{
              label: 'QTA de bultos',
              backgroundColor: color('#91B643').alpha(0.5).rgbString(),
              borderColor: '#91B643',
              borderWidth: 1,
              data: [
                  2,
                  7,
                  4,
                  11
              ]
          }]
  
      };
  
      $(document).ready(function () {
  
          var ctx = document.getElementById('myChart').getContext('2d');
          window.myHorizontalBar = new Chart(ctx, {
              type: 'horizontalBar',
              data: horizontalBarChartData,
              options: {
                  // Elements options apply to all of the options unless overridden in a dataset
                  // In this case, we are setting the border of each horizontal bar to be 2px wide
                  elements: {
                      rectangle: {
                          borderWidth: 2,
                      }
                  },
                  responsive: true,
                  legend: {
                      position: 'top',
                  },
                  title: {
                      display: true,
                      text: 'Chart.js Horizontal Bar Chart'
                  },
                  hover: {
                      animationDuration: 0
                  },
                  animation: {
                      duration: 1,
                      onComplete: function () {
                          var chartInstance = this.chart,
                          ctx = chartInstance.ctx;
  
                          ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                          ctx.textAlign = 'left';
                          ctx.textBaseline = 'center';
  
                          this.data.datasets.forEach(function (dataset, i) {
                              var meta = chartInstance.controller.getDatasetMeta(i);
                              meta.data.forEach(function (bar, index) {
                                  var data = dataset.data[index];
                                  ctx.fillStyle = "#000";
                                  ctx.fillText(data, bar._model.x + 5, bar._model.y);
                              });
                          });
                      }
                  },
                  scales: {
                      yAxes: [{
                              scaleLabel: {
                                  display: true,
                                  labelString: 'Días en Almacén'
                                },
                              gridLines: {
                                  display: false
                              }
                          }
                      ],
                      xAxes: [{
                              gridLines: {
                                  display: true
                              },
                              ticks: {
                                  beginAtZero: true
                              }
                          }
                      ]
                  },
              annotation: {
                annotations: [{
                  type: 'line',
                  mode: 'horizontal',
                  scaleID: 'x-axis-0',
                  value: 1,
                  borderColor: 'rgb(75, 192, 192)',
                  borderWidth: 4,
                  label: {
                    enabled: true,
                    content: 'Días meta: 999'
                  }
                }]
              }
              }
          });
  
      }); 
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Example - With original dataset
  <a href="https://i.stack.imgur.com/MycPp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MycPp.png" alt="Example - With original dataset"></a></p>
  
  <p>Example - With change only one value of dataset
  <a href="https://i.stack.imgur.com/KKRJs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KKRJs.png" alt="Example - With change only one value of dataset"></a></p>
  
  <p>Any help will be appreciated, thanks =)</p>