es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Dar un radio a las barras en el gráfico de barras

28 Jul, 2023 Programación

Aplica el radio de borde a las barras del gráfico de barras utilizando el módulo react-chartjs-2, por favor sugiere cambios solo en este código.
Intenté utilizar radius en el componente data pero no funcionó.

import { Bar } from 'react-chartjs-2';

<bar data="{{" labels:="" ['2020-10-26',="" '2020-10-27',="" '2020-10-28',="" '2020-10-29'],="" datasets:="" [="" {="" label:="" 'r',="" data:="" [130,="" 220,="" 310,="" 420],="" backgroundcolor:="" 'rgb(255,="" 144,="" 18)',="" },="" {="" label:="" 'm',="" data:="" [100,="" 200,="" 149,="" 330],="" backgroundcolor:="" '#66ccff',="" },="" {="" label:="" 'u',="" data:="" [90,="" 150,="" 30,="" 240],="" backgroundcolor:="" '#00ff99',="" },="" ],="" }}="" options="{{" responsive:="" true,="" cornerradius:="" 19,="" legend:="" {="" cursor:="" 'pointer',="" display:="" true,="" position:="" 'bottom',="" labels:="" {="" usepointstyle:="" true,="" boxwidth:="" 10,="" },="" },="" scales:="" {="" xaxes:="" [{="" gridlines:="" {="" display:="" false="" }="" }]="" }="" }}="" margin="{{" top:="" 5,="" right:="" 30,="" left:="" 20,="" bottom:="" 5,="" }}=""></bar>

Quiero que mis barras sean redondeadas desde arriba como en este ejemplo, las imágenes son solo ejemplos no código.
Ver ejemplo aquí

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para aplicar border-radius a las barras de un Bar_Chart utilizando el módulo react-chartjs-2, debes agregar las siguientes opciones a la propiedad datasets:

    borderRadius: 10

    Esto establecerá un border-radius de 10px a las barras. Aquí está el código actualizado:

    import { Bar } from 'react-chartjs-2';

<bar data="{{" labels:="" ['2020-10-26',="" '2020-10-27',="" '2020-10-28',="" '2020-10-29'],="" datasets:="" [="" {="" label:="" 'r',="" data:="" [130,="" 220,="" 310,="" 420],="" backgroundcolor:="" 'rgb(255,="" 144,="" 18)',="" borderradius:="" 10,="" },="" {="" label:="" 'm',="" data:="" [100,="" 200,="" 149,="" 330],="" backgroundcolor:="" '#66ccff',="" borderradius:="" 10,="" },="" {="" label:="" 'u',="" data:="" [90,="" 150,="" 30,="" 240],="" backgroundcolor:="" '#00ff99',="" borderradius:="" 10,="" },="" ],="" }}="" options="{{" responsive:="" true,="" plugins:="" {="" legend:="" {="" cursor:="" 'pointer',="" display:="" true,="" position:="" 'bottom',="" labels:="" {="" usepointstyle:="" true,="" boxwidth:="" 10,="" },="" },="" },="" scales:="" {="" xaxes:="" [="" {="" gridlines:="" {="" display:="" false,="" },="" },="" ],="" },="" }}="" margin="{{" top:="" 5,="" right:="" 30,="" left:="" 20,="" bottom:="" 5,="" }}=""></bar>

    Ten en cuenta que borderRadius no es una opción estándar de chart.js y solo funciona con react-chartjs-2.

Comments are closed.