Is it possible to change barThickness for data points of a ChartJS Horizontal bar per dataset?

83 Views Asked by At

I am using "chart.js": "^4.4.1" & "ng2-charts": "^4.1.1". For my dataset.data.point which in an array of objext having x and y points. I want to set the barThickness dynamically but It is not allowing in current version.

It is giving error as Type '(context: any) => number' is not assignable to type 'number | "flex" | undefined'.

There is any other way to set it?

{
    data: [
        { x: 20, y: 1000 },
        { x: 30, y: 2000 },
        { x: 70, y: 3000 },
        { x: 65, y: 4000 },
        { x: 56, y: 5000 },
        { x: 55, y: 6000 },
        { x: 40, y: 6000 },
    ],
    label: 'Series A',
    xAxisID: 'x1',
    **barThickness: (context: any) => {**
        console.log('context', context);
        const labelSeries = context.chart.config.data.labels;
        // console.log(labelSeries);
        let result = labelSeries.slice(1).map((v, i) => v - labelSeries[i]);
        console.log('result', result);
        const chart = context.chart;
        const currentindex = context.dataIndex;
        const { ctx, chartArea, scales, data } = chart;
        for (let q = 0; q < result.length; q++) {
            return result[context.dataIndex++];
        }
    },
    backgroundColor: (context: any) => {
        //  console.log(context);
        const chart = context.chart;
        const currentindex = context.dataIndex;
        const { ctx, chartArea, scales, data } = chart;
        if (!chartArea) {
            return null;
        }
        
        return this.patternImage(
            ctx,
            chartArea,
            scales,
            data,
            currentindex,
            img
        );
    },
    borderColor: 'red',
    borderRadius: 2,
    type: 'bar',
}

stackblitz-example

0

There are 0 best solutions below