I am attempting to create this chart:
https://i.sstatic.net/o81AC.png
When I draw the lines (Meta and Rango de aceptación), they appear as points instead of lines. I suspect this is because I only have one bar, whereas in other charts with 2 bars, the lines are drawn correctly.
Below is the code I am using. Can you help me identify what I'm doing wrong?
<canvas id="myChart2016_5857751099b04" width="500" height="500" style="display: block; width: 500px; height: 500px;"></canvas>
<script style="text/javascript">
var ctx2016_5857751099b04 = document.getElementById("myChart2016_5857751099b04");
var myChart2016_5857751099b04 = new Chart(ctx2016_5857751099b04, {
type: 'bar',
data: {
labels: ["Year 1"],
datasets: [
{backgroundColor:'rgba(36, 143, 36,0)',borderColor:'rgba(75, 172, 198,1)',
type: 'line',
label: 'Meta',
data: [100],
options: { tension:0.0, bezierCurve:false },
borderWidth: 1,
tension:0.25 },
{backgroundColor:'rgba(51, 51, 26,0)',borderColor:'rgba(182, 87, 8,1)',
type: 'line',
label: 'Rango de aceptación ',
data: [90],
options: { tension:0.0, bezierCurve:false },
borderWidth: 1,
tension:0.25 },
{backgroundColor:['rgba(99, 33, 36 ,0.1)'],borderColor:['rgba(99, 33, 36, 1)'],
type: 'bar',
label: 'Percentage of suppliers satisfactorily evaluated',
data: [100],
options: { tension:0.0, bezierCurve:false },
borderWidth: 1,
tension:0.25 }
]
},
options: {
tension:1,
scaleBeginAtZero: true,
scaleStartValue: 0,
scales: {
xAxes: [{
categorySpacing: 20,
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
}],
yAxes: [{
categorySpacing: 20,
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
I have tried setting the Meta and Rango de aceptación data values to:
data: [100,100,100] and data: [90,90,90]
However, the outcome is not what I expected:
[