score:2
Accepted answer
You can use what you have mentioned already https://github.com/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
}]
}
};
score:2
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.net/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 become a vertical line?
if (borderLeft !== borderRight) {
top = borderTop;
bottom = borderBottom;
}
// not become 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
});
}
Source: stackoverflow.com
Related Query
- Create a rounded bar graph with Angular and chartJS
- How to create rounded bar graph with Angular 7 and Chartjs (v2)
- Angular 6 ChartJS create canvas dynamically and create graph on it - an example?
- ChartJS - would like to create a mixed chart with horizontal Bar and a dot to represent the answer from the current user
- Angular and ChartJS to create bar chart
- How to create chart.js vertical bar chat with rounded corners in angular 6?
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chart.js with dual axis on bar and line graph
- How to Create Chart.JS Bar Graph with Min, Max & Average
- Graph streaming real-time data with react and chartjs
- Angular 2: How to pass my API data to graph and Display the Graph with data
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- Bar chart with min height and zero values - ChartJs
- How to create a bar and a line in a same graph using chart.js in React?
- Order and hide items of legend by value with Chartjs Angular
- ChartJs - stacked bar chart with groups - how to create second x-axis with stack id
- Angular Chartjs Overlapping Bar Chart with Chartjs ver 2.7
- How do you create rounded corners on the top and bottom of a bar chart and the between 2 part still draw like image?
- Chartjs create chart with big data and fixed labels
- The dataset for bar graph is not set properly using ng2 charts and ng5-slider in Angular
- ChartJS - Issues with positioning and viewing various components of horizontal bar
- Page break in Angular with Chartjs and tables
- Different color for each bar in a bar graph in ChartJS and VueJS
- How to change bar color on a angular-chart and chart js bar graph with multiple datasets?
- How to create a charjs bar graph with many bars?
- how to create bar chart with group and sam color for each group using chart.js?
- Chart.js Bar graph with percentage values
- How to create rounded bars for Bar Chart.js v2?
- Show bar with zero value in ChartJs v2
- Chart.js Doughnut with rounded edges and text centered
More Query from same tag
- Fix number distributions after scaling the range
- chartjs stack bar graph color not working
- ChartJS (Radar) - Set base tick position for "0" value
- Missing colors in my Chart.js, my data looks fine, but no color
- Chart.js zoom plugin: Unexpected identifier error in console
- UnitStepSize for regular time interval with Chartjs
- How to export a chart in Excel and PDF format using Chart.js
- Unable to get the expected legend shown in chart js
- How call a function when my array is filled
- how to use chartjs-plugin-crosshair in Angular 6+?
- Chart Js doesn't update the values in the first load
- Get hash value Rails / Chart.JS
- charts.js stacked y-Axis
- Defining y-starting point for floating horizontal bar charts in Chart.js?
- Chartjs tooltips disappear when calling Chart.update
- ng2-charts not showing charts in Angular 10
- Can I use chartJS for drawing a stock map with rectangle?
- Using a prepared dataset in chart.js
- Changing tooltip color in Chart.js
- Chartjs different length of labels and datasets
- JS Chart: do not merge duplicate x axis labels
- what is the correct way to destructure a nested json object with fetch?
- Export chart.js into fixed sized chart
- Use multiple datasets with Javascript Chart
- How to stack time charts vertically
- chart.js Adding Percantage Sign on Tooltip
- ng-charts not updating labels when chart data is updated at same time
- Javascript chart one number step
- Show gridlines over graph in chart.js, show bold x-axis label in chart.js, mixure of intersecting graph colors in chart.js
- Refresh chart.config.data
