I would transform my ordinary bar type chart to a rounded thin bars exactly like the photo bellow
I saw many examples suggesting to draw/extend new chart but I don't get how to do it inside angular framework, here's an example.
Here's my actual graph bar :
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;
}
}
}]
}
}
});
What I expect is a rounded bars like in the photo with an extra condition : id no value print a grey dot ( but the proiority is to make rounded bars )
I would transform my ordinary bar type chart to a rounded thin bars exactly like the photo bellow
I saw many examples suggesting to draw/extend new chart but I don't get how to do it inside angular framework, here's an example.
Here's my actual graph bar :
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;
}
}
}]
}
}
});
What I expect is a rounded bars like in the photo with an extra condition : id no value print a grey dot ( but the proiority is to make rounded bars )
Share Improve this question edited Feb 20, 2019 at 15:29 infodev asked Feb 20, 2019 at 14:10 infodevinfodev 5,25522 gold badges81 silver badges152 bronze badges2 Answers
Reset to default 2You can use what you have mentioned already https://github./jedtrow/Chart.js-Rounded-Bar-Charts. What you need to do is add both files Chart.roundedBarCharts.js and Chart.roundedBarChart.min.js (just copy them in your project folder, and include them).
Then after you have included this, you can use:
var options = {
cornerRadius: 20,
};
For tiny bars like you have on photo you shoul add barPercentage, then your code will look like:
var options = {
cornerRadius: 20,
scales: {
xAxes: [{
barPercentage: 0.4
}]
}
};
Angular 7 , chart.js bar chart corner rounded
HTML
<div style="width: 40%">
<canvas id="barChart"></canvas>
</div>
.ts
chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(231,233,237)'
};
ngAfterViewInit() {
this.canvas = document.getElementById('barChart');
this.ctx = this.canvas.getContext('2d');
Chart.elements.Rectangle.prototype.draw = function() {
var ctx = this._chart.ctx;
var vm = this._view;
var left, right, top, bottom, signX, signY, borderSkipped, radius;
var borderWidth = vm.borderWidth;
// If radius is less than 0 or is large enough to cause drawing errors a maxhttp://jsfiddle/adammoisa/v0dthnyr/7/#
// radius is imposed. If cornerRadius is not defined set it to 0.
var cornerRadius = this._chart.config.options.cornerRadius;
var fullCornerRadius = this._chart.config.options.fullCornerRadius;
var stackedRounded = this._chart.config.options.stackedRounded;
var typeOfChart = this._chart.config.type;
if (cornerRadius < 0) {
cornerRadius = 0;
}
if (typeof cornerRadius == 'undefined') {
cornerRadius = 0;
}
if (typeof fullCornerRadius == 'undefined') {
fullCornerRadius = false;
}
if (typeof stackedRounded == 'undefined') {
stackedRounded = false;
}
if (!vm.horizontal) {
// bar
left = vm.x - vm.width / 2;
right = vm.x + vm.width / 2;
top = vm.y;
bottom = vm.base;
signX = 1;
signY = bottom > top ? 1 : -1;
borderSkipped = vm.borderSkipped || 'bottom';
} else {
// horizontal bar
left = vm.base;
right = vm.x;
top = vm.y - vm.height / 2;
bottom = vm.y + vm.height / 2;
signX = right > left ? 1 : -1;
signY = 1;
borderSkipped = vm.borderSkipped || 'left';
}
// Canvas doesn't allow us to stroke inside the width so we can
// adjust the sizes to fit if we're setting a stroke on the line
if (borderWidth) {
// borderWidth shold be less than bar width and bar height.
var barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));
borderWidth = borderWidth > barSize ? barSize : borderWidth;
var halfStroke = borderWidth / 2;
// Adjust borderWidth when bar top position is near vm.base(zero).
var borderLeft = left + (borderSkipped !== 'left' ? halfStroke * signX : 0);
var borderRight = right + (borderSkipped !== 'right' ? -halfStroke * signX : 0);
var borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0);
var borderBottom = bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0);
// not bee a vertical line?
if (borderLeft !== borderRight) {
top = borderTop;
bottom = borderBottom;
}
// not bee a horizontal line?
if (borderTop !== borderBottom) {
left = borderLeft;
right = borderRight;
}
}
ctx.beginPath();
ctx.fillStyle = vm.backgroundColor;
ctx.strokeStyle = vm.borderColor;
ctx.lineWidth = borderWidth;
// Corner points, from bottom-left to bottom-right clockwise
// | 1 2 |
// | 0 3 |
var corners = [
[left, bottom],
[left, top],
[right, top],
[right, bottom]
];
// Find first (starting) corner with fallback to 'bottom'
var borders = ['bottom', 'left', 'top', 'right'];
var startCorner = borders.indexOf(borderSkipped, 0);
if (startCorner === -1) {
startCorner = 0;
}
function cornerAt(index) {
return corners[(startCorner + index) % 4];
}
// Draw rectangle from 'startCorner'
var corner = cornerAt(0);
ctx.moveTo(corner[0], corner[1]);
var nextCornerId, nextCorner, width, height, x, y;
for (var i = 1; i < 4; i++) {
corner = cornerAt(i);
nextCornerId = i + 1;
if (nextCornerId == 4) {
nextCornerId = 0
}
nextCorner = cornerAt(nextCornerId);
width = corners[2][0] - corners[1][0];
height = corners[0][1] - corners[1][1];
x = corners[1][0];
y = corners[1][1];
var radius = cornerRadius;
// Fix radius being too large
if (radius > Math.abs(height) / 2) {
radius = Math.floor(Math.abs(height) / 2);
}
if (radius > Math.abs(width) / 2) {
radius = Math.floor(Math.abs(width) / 2);
}
var x_tl, x_tr, y_tl, y_tr, x_bl, x_br, y_bl, y_br;
if (height < 0) {
// Negative values in a standard bar chart
x_tl = x;
x_tr = x + width;
y_tl = y + height;
y_tr = y + height;
x_bl = x;
x_br = x + width;
y_bl = y;
y_br = y;
// Draw
ctx.moveTo(x_bl + radius, y_bl);
ctx.lineTo(x_br - radius, y_br);
// bottom right
ctx.quadraticCurveTo(x_br, y_br, x_br, y_br - radius);
ctx.lineTo(x_tr, y_tr + radius);
// top right
fullCornerRadius ? ctx.quadraticCurveTo(x_tr, y_tr, x_tr - radius, y_tr) : ctx.lineTo(x_tr, y_tr, x_tr - radius, y_tr);
ctx.lineTo(x_tl + radius, y_tl);
// top left
fullCornerRadius ? ctx.quadraticCurveTo(x_tl, y_tl, x_tl, y_tl + radius) : ctx.lineTo(x_tl, y_tl, x_tl, y_tl + radius);
ctx.lineTo(x_bl, y_bl - radius);
// bottom left
ctx.quadraticCurveTo(x_bl, y_bl, x_bl + radius, y_bl);
} else if (width < 0) {
// Negative values in a horizontal bar chart
x_tl = x + width;
x_tr = x;
y_tl = y;
y_tr = y;
x_bl = x + width;
x_br = x;
y_bl = y + height;
y_br = y + height;
// Draw
ctx.moveTo(x_bl + radius, y_bl);
ctx.lineTo(x_br - radius, y_br);
// Bottom right corner
fullCornerRadius ? ctx.quadraticCurveTo(x_br, y_br, x_br, y_br - radius) : ctx.lineTo(x_br, y_br, x_br, y_br - radius);
ctx.lineTo(x_tr, y_tr + radius);
// top right Corner
fullCornerRadius ? ctx.quadraticCurveTo(x_tr, y_tr, x_tr - radius, y_tr) : ctx.lineTo(x_tr, y_tr, x_tr - radius, y_tr);
ctx.lineTo(x_tl + radius, y_tl);
// top left corner
ctx.quadraticCurveTo(x_tl, y_tl, x_tl, y_tl + radius);
ctx.lineTo(x_bl, y_bl - radius);
// bttom left corner
ctx.quadraticCurveTo(x_bl, y_bl, x_bl + radius, y_bl);
} else {
var lastVisible = 0;
for (var findLast = 0, findLastTo = this._chart.data.datasets.length; findLast < findLastTo; findLast++) {
if (!this._chart.getDatasetMeta(findLast).hidden) {
lastVisible = findLast;
}
}
var rounded = this._datasetIndex === lastVisible;
if (rounded) {
//Positive Value
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
// top right
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
// bottom right
if (fullCornerRadius || typeOfChart == 'horizontalBar')
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
else
ctx.lineTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
// bottom left
if (fullCornerRadius)
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
else
ctx.lineTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
// top left
if (fullCornerRadius || typeOfChart == 'bar')
ctx.quadraticCurveTo(x, y, x + radius, y);
else
ctx.lineTo(x, y, x + radius, y);
} else {
ctx.moveTo(x, y);
ctx.lineTo(x + width, y);
ctx.lineTo(x + width, y + height);
ctx.lineTo(x, y + height);
ctx.lineTo(x, y);
}
}
}
ctx.fill();
if (borderWidth) {
ctx.stroke();
}
};
/**Chart Data**/
var data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'data 0',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 0
}, {
label: 'data 1',
data: [20, 24, 10, 15, 12, 13],
backgroundColor: [
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 206, 86, 1)',
'rgba(54, 162, 235, 1)',
'rgba(153, 102, 255, 1)',
'rgba(75, 192, 192, 1)'
],
borderWidth: 0
}, {
label: 'data 2',
data: [20, 30, 30, 20, 14, 20],
backgroundColor: [
'rgba(75, 192, 192, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 206, 86, 1)',
'rgba(54, 162, 235, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 0
}]
};
/**Chart Options - Radius options are here**/
var options = {
//Border radius; Default: 0; If a negative value is passed, it will overwrite to 0;
cornerRadius: 20,
//Default: false; if true, this would round all corners of final box;
fullCornerRadius: false,
//Default: false; if true, this rounds each box in the stack instead of only final box;
stackedRounded: false,
legend: {
display: false
},
elements: {
point: {
radius: 25,
hoverRadius: 35,
pointStyle: 'rectRounded',
}
},
scales: {
yAxes: [{
gridLines: {
display:false
},
ticks: {
beginAtZero: true
},
stacked: true,
radius: 25
}],
xAxes: [{
gridLines: {
display:false
},
ticks: {
beginAtZero: true
},
stacked: true,
}]
}
};
/**Generate Chart**/
// var ctxBar = document.getElementById("myChart");
var myBarChart = new Chart(this.ctx, {
type: 'bar',
data: data,
options:options
});
}