Styjun

I'm trying to achieve the following chart but i am not able to build it.

I was trying with this code (using https://github.com/chartjs/chartjs-plugin-annotation) 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.

The code:

<script> 

 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'
 
 ]
 
 
 );

 ); 

</script>

Example - With original dataset

Example - With change only one value of dataset

Any help will be appreciated, thanks =)