Использую в библиотеке react-chartjs-2 3.0.5 с chart.js 3.5.1 Отлаживаю всё в Storybook (сомневаюсь, что это важно).
Моя компонента с графиком bar
import { Props } from 'react-chartjs-2/dist/types';
import { Bar } from 'react-chartjs-2';
export const BarChart = ({
id,
data,
options,
height,
width,
redraw,
className,
fallbackContent,
getDatasetAtEvent,
getElementAtEvent,
getElementsAtEvent,
}: Props) => {
return (
<div>
<Bar
id={id}
data={data}
options={options}
height={height}
width={width}
redraw={redraw}
className={className}
fallbackContent={fallbackContent}
getDatasetAtEvent={getDatasetAtEvent}
getElementAtEvent={getElementAtEvent}
getElementsAtEvent={getElementsAtEvent}
/>
</div>
);
};
когда вызываю её и передаю options всегда ругается на тип. например тут:
const HorizontalChart = () => {
const data = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
dпустаatasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'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: 1,
},
],
};
const options = {
indexAxis: 'y',
// Elements options apply to all of the options unless overridden in a dataset
// In this case, we are setting the border of each horizontal bar to be 2px wide
elements: {
bar: {
borderWidth: 2,
},
},
responsive: true,
plugins: {
legend: {
position: 'right',
},
title: {
display: true,
text: 'Chart.js Horizontal Bar Chart',
},
},
};
const width = 600;
const height = 350;
return <BarChart
type={'bar'}
data={data}
options={options}
height={height}
width={width}
/>;
};
ошибку пишет следующую: Типы свойства "indexAxis" несовместимы. Тип "string" не может быть назначен для типа ""x" | "y" | undefined". Ожидаемый тип поступает из свойства "options", объявленного здесь в типе "IntrinsicAttributes & Props"
не могу понять что не так, всё делал как в примере из документации.