Forum Discussion
Gantt Formatting in Sharepoint list
Hi All Topic that often does the rounds, in relation to a Gantt style view in modern Sharepoint. I have a that I try to track their capacity and ability to take on more work throughout the ye...
After doing much fiddling, I'm incredibly close. The below code is displaying everything correctly for a 2 year period, progress bar correctly aligned with months and years however as soon as I go to add a third year, everything falls out of alignment, any ideas?
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"margin": "5px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"width": "100%",
"margin-bottom": "5px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"justify-content": "space-between",
"align-items": "center",
"width": "100%",
"margin-bottom": "0px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"width": "50%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"margin-bottom": "0px",
"height": "40px",
"padding-top": "0px",
"padding-bottom": "0px"
},
"children": [
{
"elmType": "span",
"txtContent": "=getYear([$Start])"
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"justify-content": "space-between",
"width": "100%",
"margin-bottom": "3px"
},
"children": [
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Jan"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Feb"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Mar"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Apr"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "May"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Jun"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Jul"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Aug"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Sep"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Oct"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Nov"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Dec"
}
]
}
]
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"width": "50%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"margin-bottom": "0px",
"height": "40px",
"padding-top": "0px",
"padding-bottom": "0px"
},
"children": [
{
"elmType": "span",
"txtContent": "=getYear([$Start]) + 1"
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"justify-content": "space-between",
"width": "100%",
"margin-bottom": "3px"
},
"children": [
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Jan"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Feb"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Mar"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Apr"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "May"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Jun"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Jul"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Aug"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Sep"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Oct"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Nov"
},
{
"elmType": "span",
"style": {
"width": "100%",
"text-align": "left",
"border-left": "1px solid lightgray",
"padding-left": "5px",
"padding-top": "2px",
"padding-bottom": "2px"
},
"txtContent": "Dec"
}
]
}
]
}
]
}
]
},
{
"elmType": "div",
"style": {
"display": "flex",
"width": "100%",
"border": "2px solid",
"height": "20px"
},
"attributes": {
"class": "ms-fontColor-themePrimary"
},
"children": [
{
"elmType": "div",
"style": {
"position": "relative",
"cursor": "pointer",
"max-width": "=((Number(Date('' + getYear([$End]) + '/12/31')) - Number(Date([$Start]))) / (Number(Date('' + getYear([$End]) + '/12/31')) - Number(Date('' + getYear([$Start]) + '/01/01')))) * 100 + '%'",
"width": "=((Number(Date([$End])) - Number(Date([$Start]))) / (Number(Date('' + getYear([$End]) + '/12/31')) - Number(Date('' + getYear([$Start]) + '/01/01')))) * 100 + '%'",
"left": "=((Number(Date([$Start])) - Number(Date('' + getYear([$Start]) + '/01/01'))) / (Number(Date('' + getYear([$End]) + '/12/31')) - Number(Date('' + getYear([$Start]) + '/01/01')))) * 100 + '%'"
},
"attributes": {
"class": "ms-bgColor-themePrimary ms-bgColor-themeTertiary--hover"
},
"customCardProps": {
"directionalHint": "topCenter",
"isBeakVisible": true,
"openOnEvent": "hover",
"formatter": {
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"justify-content": "center",
"width": "250px",
"height": "30px",
"margin": "10px",
"font-weight": "bold"
},
"attributes": {
"class": "ms-fontSize-l"
},
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "span",
"txtContent": "[$Start.displayValue]"
},
{
"elmType": "span",
"style": {
"margin-left": "5px",
"margin-right": "5px"
},
"txtContent": "-"
},
{
"elmType": "span",
"txtContent": "[$End.displayValue]"
}
]
}
]
}
}
}
]
},
{
"elmType": "div",
"style": {
"display": "flex",
"width": "100%",
"border": "1px solid",
"height": "8px"
},
"attributes": {
"class": "ms-fontColor-themePrimary"
},
"children": [
{
"elmType": "div",
"style": {
"position": "relative",
"width": "= '1' + '%'",
"left": "= floor(((Number(@now)-Number(Date('' + getYear([$Start]) + '/1/1')))/(1000*60*60*24))/(365 * (getYear([$End]) - getYear([$Start]) + 1)) * 100) + '%'"
},
"attributes": {
"class": "ms-bgColor-sharedRed10"
}
}
]
}
]
}