Setting the border-radius property for the bar chart in ChartJS

Currently, I am in the process of developing a stacked bar chart using ng2-chart, an Angular-2 version of ChartJs.

In my attempt to create a bar chart with rounded corners as shown in the attached image, I have been facing difficulties finding the necessary option to achieve this effect.

If you could provide some guidance on how to accomplish this, it would be greatly appreciated.

Below is a snippet of my code:

public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: false,
    scales: {
      xAxes: [{
        stacked: true
      }],
      maxBarThickness: 5,
      yAxes: [{
        stacked: true
      }],

    },
    barThickness:20,
    legend: {
      display: true,
      position: 'right',
      labels: {
          fontColor: '#fff'
      }
}

};

<canvas baseChart style="height:350px; width:1150px;" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend"
[colors]="lineChartColors" [chartType]="barChartType">
 </canvas>

https://i.sstatic.net/g8ZWG.png

javascriptcssangularjschart.jsng2-charts

Answer №1

Incorporating version 3 of chart.js allows for easy customization using the borderRadius property. To implement this feature, it is currently required to install the next branch of ng2-charts which is in its 7th release candidate tailored for compatibility with v3 of chart.js.

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'pink',
      borderRadius: Number.MAX_VALUE,
      borderSkipped: false,
    }]
  },
  options: {}
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Alert: moment timezone deprecation notice

let timezone = "GMT"; return moment(moment().tz(timezone).format('LLL')); The code snippet above is causing the following error. Could you please help me with fixing it? Deprecation warning: The provided value is not in a recognized RFC2822 o ...

angularjsmomentjs

Guidelines on receiving a user's color input and showcasing it with JavaScript

/* Take a color input from the user and apply it to the variable called "message". */ <script type="text/javascript"> var textcol, message = "Great choice of color!"; textcol=window.prompt("Please enter a color:&quo ...

javascripthtmlcolors

Aligning columns for divs with varying heights in CSS

I have been working on aligning divs with varying heights and encountered a challenge. To view the layout I am referring to, check out this JSFiddle link: jsfiddle Based on the example provided, if there is only one child element it should be centered. Ho ...

htmlcsssassflexbox

Checkbox not working in Chrome [Version 101.0.4951.41 (Official Build) (64-bit)]

Update: It appears that the checkboxes in my project are not functioning correctly. Even when a standard checkbox was added to the HTML, it failed to respond to click events. I am currently developing a dat.gui menu for my THREE.JS project. You can find ...

javascriptthree.jsdat.gui

Is there a way to adjust the margin widths between specific columns without causing them to wrap onto a new line? I need to maintain a total of 12 columns

Check out this JSFiddle link for the code. I am trying to adjust the vertical margin width between specific columns. I attempted to add a margin between my col-xs-4 and col-lg-4 by using mr-4. <div class="container-fluid"> <di ...

htmlcsstwitter-bootstrap-3bootstrap-4

"Enhancing user engagement in ThreeJS: a guide to incorporating interactivity

After successfully rendering a model in ThreeJS, my next task is to incorporate interactivity by: Coloring specific parts of the model based on user input. Implementing a feature where clicking on any part of the model triggers it to be highlighted. As ...

javascriptthree.js

Close the Hopscotch modal when moving to the next step or reaching the end

I'm having trouble figuring out how to close the modal after opening it. Initially, I can open the modal successfully using the following code: onNext: function() { $('#modal').modal('toggle'); } However, when attempting to cl ...

javascripthtmlhopscotch

Callback function triggered upon the creation of a DOM node

I am in search of a way to have a specific callback function run each time a div that matches a particular selector is added to the DOM. I have explored the DOM events documentation and the event closest to what I need seems to be "load", however, it does ...

javascriptjquerydomjstree

Using callback functions in a JavaScript AJAX request

I am currently working on a function to handle an Ajax request with a callback. The main goal of this code is to send a request and display the response within a div element on my HTML page. However, I have been facing issues with the callback functionalit ...

javascriptjqueryajaxcallback

Apply the jQuery method to select elements with index 3, 4, 5, 6, or 7, then add

My current Wordpress blog displays 20 posts. I am looking to apply a specific class to posts numbered 2 through 10, and then again from 12 to 20. I do not want the first post or post number 11 to have this class added. I attempted using CSS selectors lik ...

jquerycsswordpress

What is the process for including an "everything" alternative on a dropdown menu?

Need assistance with my dropdown component that filters a list based on 'state' data. Below is the HTML code for the dropdown: <section class="select-wrapper {{wrapperClass}}" [ngClass]="{'expanded': toggle}" (click)="toggleSelect($ ...

javascripttypescriptdrop-down-menuangular7dropdown

`json object allows for category selection in options`

Hello (please excuse my English), I have the following script: <script type="text/javascript"> $(document).ready(function() { var idPlato = decodeURI(getUrlVars()["idPl"]); var url = "http://localhost/plato-datos.php?idPla="+idPl ...

javascriptjsonajaxhtmljquery-mobile

Fixing event listener problem in ReactJS

const ControlPanel = ({ mainSectionRef }) => { const [canMove, setCanMove] = useState(false) const classes = useStyles(); const toolbarRef = useRef(); const onMouseMove = function (e) { const { x, y } = getMouseCoordinatesOnCanv ...

javascriptreactjsdom-events

Encountered an uncaught error in Vue3 Vue-Apollo: Apollo client with the identifier "default" was not found

I have been working with Vue3 and the composition API along with vue-apollo. I am trying to send a mutation to a GraphQL endpoint using useMutation(). However, while useQuery works perfectly fine, I am facing some issues with useMutation. Initially, every ...

javascriptvue.jserror-handlinggraphqlvue-apollo

The requested API endpoint for retrieving the name could not be found on the Express

Struggling to configure the restful API for my express app. Below is my app.js code: var express = require('express'), app = express(), bodyParser = require('body-parser'), methodOverride = require('method-override'); rout ...

javascriptnode.jsexpress

Intricate form of a character's silhouette

Imagine I have a unique character that users can select, and when it's selected, I want to display an outline around it. The character is represented as an object3D with multiple meshes. I attempted cloning the character and applying a backside mater ...

javascriptthree.jsoutline

unique navbar color transition effect specifically for the homepage

I have successfully created a function called changeColour in my code that changes the color of the navbar when scrolling past a certain point. However, I am encountering an issue where I only want this effect to be applied on the Home page. I would like a ...

javascriptcssreactjsscrollreact-router-dom

DoubleClicking on Checkbox Causes jQuery Click Event to Trigger Twice

Experimenting with DataTables, I have created a table setup like this: <table id='dt'> <thead><!-- Some Header --></thead> <tbody> <tr data-lineid=1> <td><input type=' ...

javascriptjqueryeventsclick

Generating input fields dynamically in a list and extracting text from them: A step-by-step guide

I am designing a form for users to input multiple locations. While I have found a way to add input boxes dynamically, I suspect it may not be the most efficient method. As I am new to this, I want to ensure I am doing things correctly. Here is how I curren ...

javascriptajaxjquery

Implementing dynamic authorization headers in axios with vue.js

I am currently working on a Vue.js application that heavily relies on API calls, utilizing axios to make these requests. I have implemented a similar pattern found at this link. Essentially, I have created a service that will be shared across all componen ...

javascriptvue.jsaxiosvuex