Hello,
I would like to create hierarchical column like this one below:
I already created hierarchy in dataset:
private static hierarchyDataset(
dataView: DataView,
taskTypes: TaskTypes,
settings: GanttSettings,
host: IVisualHost
😞 Task[] | any[] {
let tasks: Task[] = [];
const values: GanttColumns<any> =
GanttColumns.getCategoricalValues(dataView);
if (!values.yAxis) {
return tasks;
}
const groupValues: GanttColumns<DataViewValueColumn>[] =
GanttColumns.getGroupedValueColumns(dataView);
let endDate: ISegment = { date: null, name: "" };
for (let j = 0; j < values.yAxis.length; j++) {
for (let index = 0; index < values.yAxis[0].length; index++) {
let seriesName: TaskTypeMetadata = null;
let wasDowngradeDurationUnit: boolean = false;
let stepDurationTransformation: number = 0;
let segment: ISegment[] = [];
const selectionBuilder: ISelectionIdBuilder = host
.createSelectionIdBuilder()
.withCategory(dataView.categorical.categories[0], index);
if (groupValues) {
groupValues.forEach((group: GanttColumns<any>) => {
if (group.endDate && group.endDate.values[index] !== null) {
seriesName = find(
taskTypes.types,
(typeMeta: TaskTypeMetadata) =>
typeMeta.name === group.endDate.source.groupName
);
if (seriesName) {
selectionBuilder.withCategory(seriesName.selectionColumn, 0);
}
endDate = {
date: group.endDate.values[index]
? moment(group.endDate.values[index] as Date)
: null,
name: group.endDate.source.displayName,
showOnTooltip: !!group.endDate.values[index],
role: `endDate`,
};
if (typeof endDate === "string" || typeof endDate === "number") {
endDate = endDate;
}
}
group.segment.map((d, i) => {
if (d && d.values[index] !== null) {
seriesName = find(
taskTypes.types,
(typeMeta: TaskTypeMetadata) =>
typeMeta.name === d.source.groupName
);
if (seriesName) {
selectionBuilder.withCategory(seriesName.selectionColumn, 0);
}
segment[i] = {
date:
d.values[index] && Date.parse(d.values[index])
? moment(d.values[index] as Date)
: null,
name: d.source.displayName || null,
showOnTooltip: !!d.values[index],
role: `segment${i}`,
};
}
});
});
}
const selectionId: powerbi.extensibility.ISelectionId =
selectionBuilder.createSelectionId();
const categoryValues: string[] = [];
values.yAxis.map((d, i) => {
categoryValues.push(d[index]);
});
let startDate: ISegment = { date: null, name: "" };
startDate = {
date: values.startDate && moment(values.startDate[index]),
name: dataView.categorical.categories.filter(
(d) => d.source.roles.startDate
)[0].source.displayName,
showOnTooltip: !!values.startDate[index],
role: `startDate`,
};
const milestoneDate: Date =
((values.milestoneDate &&
!isEmpty(values.milestoneDate[index]) &&
values.milestoneDate[index]) as Date) || null;
const task: Task = {
index: index,
yAxis: categoryValues,
name: categoryValues[j],
parentName: j === 0 ? null : categoryValues[j - 1],
parentID: j === 0 ? null : j - 1,
children: [],
startDate: startDate,
endDate: endDate,
segments: Object.assign([], [startDate, ...segment, endDate]),
visibility: true,
seriesName: seriesName && seriesName.name,
selected: false,
identity: selectionId,
wasDowngradeDurationUnit,
stepDurationTransformation,
milestoneDate: milestoneDate && moment(milestoneDate),
};
tasks.forEach((task) => {
if (task.endDate && task.startDate) {
task.endDate = task.endDate;
} else {
task.endDate = task.startDate;
}
});
tasks.push(task);
}
}
return tasks;
}
//---------
private prepareHierarchyData(tasks) {
_(tasks).forEach((f) => {
f.children = _(tasks)
.filter((g) => g.parentName === f.name)
.value();
});
const resultArray = _(tasks)
.filter((f) => f.parentName === null)
.value();
return _.unionBy(resultArray, (d) => d.name);
}
My capabilities.json looks like that:
"dataRoles": [
{
"displayName": "yAxis",
"name": "yAxis",
"kind": "Grouping"
},
{
"displayName": "Legend",
"name": "projectStatus",
"kind": "Grouping"
},
{
"displayName": "Milestone",
"name": "milestoneDate",
"kind": "Grouping"
},
{
"displayName": "Start Date",
"name": "startDate",
"kind": "Grouping"
},
{
"displayName": "End Date",
"name": "endDate",
"kind": "Measure"
},
{
"displayName": "Phases",
"name": "segment",
"kind": "Measure"
}
],
"dataViewMappings": [
{
"conditions": [
{
"yAxis": {
"max": 5
},
"projectStatus": {
"max": 1
},
"milestoneDate": {
"max": 1
},
"startDate": {
"max": 1
},
"endDate": {
"max": 1
},
"segment": {
"max": 10
}
}
],
"categorical": {
"categories": {
"select": [
{
"for": {
"in": "yAxis"
}
},
{
"for": {
"in": "milestoneDate"
}
},
{
"for": {
"in": "startDate"
}
}
]
},
"values": {
"group": {
"by": "projectStatus",
"select": [
{
"for": {
"in": "endDate"
}
},
{
"for": {
"in": "segment"
}
}
]
}
}
}
}
],
I don't know how to move on. I was trying to create sth like these here https://observablehq.com/@d3/icicle?ui=classic but I don't have values so it doesn't work for me since I have dates only. Also I was reading about treemap but I don't know how to use it in that case.
Do you have any examples or solutions how to draw hierarchical table ? It doesn't has to be with plus/minus button.
I will be gratefull for any answear.
Hi @filipwydra
I think you can try to transform your table in Power Query Editor and then let your table in format: Level1, Level2,Level3,...,Values. Then add these columns in Matrix visual, and turn off Stepped layout in Format.
Then you can get result you want.
Best Regards,
Rico Zhou
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Helpful resources
New to Fabric Survey
If you have recently started exploring Fabric, we'd love to hear how it's going. Your feedback can help with product improvements.
Power BI DataViz World Championships - June 2026
A new Power BI DataViz World Championship is coming this June! Don't miss out on submitting your entry.
Join our Fabric User Panel
Share feedback directly with Fabric product managers, participate in targeted research studies and influence the Fabric roadmap.
Power BI Community Update - March 2026
Check out the March 2026 Power BI update to learn about new features.
