borderWidth&borderColor do not affect the component when adding it to datasets object but it works fine with chart-js.

[krip4ik]

import React from 'react'; import PropTypes from 'prop-types'; import { HorizontalBar } from 'react-chartjs-2'; import { StyledHorizontalBarChart } from './HorizontalBarChart.style';

const HorizontalBarChart = ({ children, debugId }) => { const data = { labels: ['Label 1', 'Label 2'], datasets: [ { backgroundColor: 'red', borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0, borderJoinStyle: 'miter', borderWidth: 5, borderColor: 'transparent', data: [26, null, null, null], fill: true, label: 'dfssf', lineTension: 0.35, pointHitRadius: 0, pointHoverBorderWidth: 1, pointHoverRadius: 4, pointRadius: 0, shapes: 'plus', }, { backgroundColor: 'blue', borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0, borderJoinStyle: 'miter', borderWidth: 5, borderColor: 'transparent', data: [26, null, null, null], fill: true, label: 'wsegfsef', lineTension: 0.35, pointHitRadius: 0, pointHoverBorderWidth: 1, pointHoverRadius: 4, pointRadius: 0, shapes: 'plus', }, { backgroundColor: 'green', borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0, borderJoinStyle: 'miter', borderWidth: 5, borderColor: 'transparent', data: [26, null, null, null], fill: true, label: 'sesf', lineTension: 0.35, pointHitRadius: 0, pointHoverBorderWidth: 1, pointHoverRadius: 4, pointRadius: 0, shapes: 'plus', }, { backgroundColor: 'rgba(70, 91, 108, 0.7)', borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0, borderJoinStyle: 'miter', borderWidth: 1, data: [null, 28, null, null], fill: true, label: 'Alina', lineTension: 0.35, pointHitRadius: 0, pointHoverBorderWidth: 1, pointHoverRadius: 4, pointRadius: 0, shapes: 'plus', }, ], };

const options = { maintainAspectRatio: false, responsive: true, tooltips: { enabled: true, mode: 'single', }, scales: { yAxes: [ { barPercentage: 10, barThickness: 10, display: true, gridLines: { display: true, drawTicks: true, drawOnChartArea: false, }, stacked: true, ticks: { fontColor: '#555759', fontFamily: 'Lato', fontSize: 11, }, }, ], xAxes: [ { barPercentage: 0.5, barThickness: 5,

      gridLines: {
        color: '#8e8e8e',
        display: false,
        drawBorder: false,
        drawOnChartArea: false,
        drawTicks: false,
        tickMarkLength: 5,
      },
      stacked: true,
      ticks: {
        beginAtZero: true,
        display: true,
        fontColor: '#a9adb2',
        fontFamily: 'Roboto, Areal, sans-serif',
        fontSize: 11,
        fontStyle: 'bold',
        padding: 5,
      },
    },
  ],
},

};

return ( <StyledHorizontalBarChart data-debug-id={horizontalbarchart-${debugId}}> <HorizontalBar data={data} options={options} /> </StyledHorizontalBarChart> ); };

HorizontalBarChart.propTypes = { /** Some props description / /* data-debug-id */ debugId: PropTypes.string.isRequired, };

HorizontalBarChart.defaultProps = {};

export default HorizontalBarChart;

[Arantiryo]

Hi @krip4ik 👋

Is the issue still relevant with the latest chart.js and react-chartjs-2 versions?