I am looking to enhance my standard bar chart by creating rounded thin bars, similar to the image below:
https://i.sstatic.net/uugJV.png
While I have come across examples that suggest creating a new chart, I am unsure of how to implement this within the angular framework. Here is an example for reference.
Current bar graph:
const ctx = this.myChart.nativeElement.getContext('2d');
this.myChartBis = new Chart(ctx, {
type: 'bar',
data: {
labels: this.labels,
datasets: [{
label: 'test',
showLine: true,
lineTension: 0,
data: this.data,
fill: false,
pointBorderColor: '#cd0037',
pointBackgroundColor: '#ffffff',
borderColor: [
'#747678',
],
borderWidth: 0
}
],
},
options: {
showLines: true,
legend: {
display: false,
},
responsive: true,
maintainAspectRatio: true,
tooltips: {
yPadding: -2,
xPadding: 10,
footerMarginTop: 5,
titleFontColor: 'rgba(0, 0, 255, 0.0)',
displayColors: false,
borderWidth: 1,
bodyFontSize: 16,
bodyFontFamily: 'Avenir',
backgroundColor: '#FFF',
borderColor: '#d7d7d7',
bodyFontColor: '#0088ce',
scales: {
yAxes: [{
display: false,
gridLines: {
drawBorder: false
},
ticks: {
maxTicksLimit: 5,
display: true,
autoSkip: false,
min: 0,
max: 100,
}
}],
xAxes: [{
display: false,
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
autoSkip: false,
callback: (value: any) => {
return value;
}
}
}]
}
}
});
I am hoping to achieve rounded bars similar to the example image, with the additional condition of displaying a grey dot if no value is present (although the priority is to create rounded bars).