Our state of the art Gantt chart


Post by ashwinpt »

Hello, I'm trying to integrate Bryntum Gantt into my React application, and I'm not seeing critical paths highlighted even after setting the property on the BryntumGanttProps object. Here is the code for reference:

const dependencies = [
    { id: 1, from: 11, to: 12 },
    { id: 11, from: 1, to: 2 },
    { id: 2, from: 1, to: 3 },
    { id: 3, from: 2, to: 3 },
    { id: 4, from: 31, to: 32 },
    { id: 5, from: 32, to: 33 },
];

const ganttProps: BryntumGanttProps = {
    tasks: data,
    dependencies: dependencies,
    columns: [
        {
            type: 'name',
            field: 'name',
            width: 250,
        },
    ],
    viewPreset: 'weekAndDayLetter',
    barMargin: 10,
    height: 600,
    criticalPathsFeature: true,
};

function BryntumGanttChart() {
    return <BryntumGantt {...ganttProps} />;
}

I've attached the chart that gets rendered with the above code. I'm wondering if I'm doing something wrong in enabling the critical path display.

Screenshot 2025-01-24 at 11.43.01 AM.png
Screenshot 2025-01-24 at 11.43.01 AM.png (234.39 KiB) Viewed 95 times

Post by marcio »

Hey ashwinpt,

Thanks for reaching out and welcome to our forums.

As you'll see in the docs https://bryntum.com/products/gantt/docs/api/Gantt/feature/CriticalPaths to visualize the critical path you need to use {disabled: false } as the feature is already enabled. Use the following snippet in our React demo to make it display the critical path correctly.

<BryntumGantt {...ganttConfig} criticalPathsFeature={{ disabled: false }} />
Attachments
Screenshot 2025-01-24 at 18.02.54.png
Screenshot 2025-01-24 at 18.02.54.png (589.59 KiB) Viewed 85 times

Best regards,
Márcio

How to ask for help? Please read our Support Policy


Post Reply