# What's new in Scheduler Pro v4.3.0

## Changes to TimeAxisColumn

TimeAxisColumn now subclasses WidgetColumn (before it was a Column), this should not affect your code. This opens up
for rendering widgets embedded in row cells, see this demonstrated in
[embedded-chart](https://bryntum.com/products/schedulerpro/examples/embedded-chart/) demo.

```javascript
columns : [
    // A column using a custom render to display an icon + text
    {
        type    : 'timeAxis',
        widgets : [
            { type : 'chartjslinechart' }
        ],
        renderer({ record, cellElement, grid: gantt, widgets }) {
            // populate the chart widget
        }
    }
]
```

## New demo showing how to embed a chart into row cells of the time axis section 

We added a new cool demo showing how to render a 3rd party charting widget (Chart.js) in the grid cells of the time
axis section. This is demonstrated in the new
[embedded-chart](https://bryntum.com/products/schedulerpro/examples/embedded-chart/) demo.

## Support for resource grouping in the histogram

[The histogram](#SchedulerPro/view/ResourceHistogram) now supports resource grouping.
It collects resources info and displays the aggregated allocation on the group level:

<div class="external-example" data-file="SchedulerPro/guides/whats-new/4.3.0/histogram.js"></div>

**Please note** that [GroupSummary](#Grid/feature/GroupSummary) feature is still not supported
(subscribe to [this ticket](https://github.com/bryntum/support/issues/2283) to stay informed).

## New demo showing how to group events and use custom layout function

We added a new demo showing how to group events inside a resource row or position them manually. Please refer to the
[custom-layouts](https://bryntum.com/products/schedulerpro/examples/custom-layouts/) demo.

```javascript
// Use field to group events
new SchedulerPro({
    eventLayout : {
        groupBy : 'priority'
    }
})

// position events manually
new SchedulerPro({
    eventLayout : {
        layoutFn : items => {
            // put event to random top position
            items.forEach(item => {
                item.top = Math.random() * 50;
            });

            // return row height
            return 100;
        }
    }
})
```



<p class="last-modified">Last modified on 2023-10-26 8:19:27</p>