Home Page Chart Block connecting no lines.

[photon-flip]

An hourglass chart in a Chart Block added to the Home Page has no connecting lines or colored backgrounds. Note this is the tree landing page not the user's My Page. The Charts Block that's added via the "Customize this page" dialogue.

[photon-flip]

Seems to be fixable with some additional css. This works for me but needs checking. `:root { --chart-line-radius: .3rem; --chart-line: solid gray thin }

[dir=ltr] .wt-chart-vertical-line { border-left: thin solid gray; border-left: var(--chart-line); right: 0 }

[dir=rtl] .wt-chart-vertical-line { border-right: thin solid gray; border-right: var(--chart-line); left: 0 }

.wt-chart-vertical-last-child-line { height: 2.5rem; top: 0; width: 50% }

[dir] .wt-chart-vertical-last-child-line { border-bottom: thin solid gray; border-bottom: var(--chart-line) }

[dir=ltr] .wt-chart-vertical-last-child-line { border-left: thin solid gray; border-left: var(--chart-line); border-radius: 0 0 0 1rem; border-radius: 0 0 0 var(--chart-line-radius); right: 0 }

[dir=rtl] .wt-chart-vertical-last-child-line { border-radius: 0 0 .3rem 0; border-radius: 0 0 var(--chart-line-radius) 0; border-right: thin solid gray; border-right: var(--chart-line); left: 0 }

.wt-chart-vertical-child-line { height: 2.5rem; top: 0; width: 50% }

[dir] .wt-chart-vertical-child-line { border-bottom: thin solid gray; border-bottom: var(--chart-line) }

[dir=ltr] .wt-chart-vertical-child-line { right: 0 }

[dir=rtl] .wt-chart-vertical-child-line { left: 0 }

.wt-chart-horizontal-spacer { width: 1rem }

.wt-chart-horizontal-line { height: 50%; width: 1rem }

[dir] .wt-chart-horizontal-line { border-bottom: thin solid gray; border-bottom: var(--chart-line) }

.wt-chart-horizontal-first-child { height: 50%; position: relative; top: 50% }

[dir] .wt-chart-horizontal-first-child { border-top: thin solid gray; border-top: var(--chart-line) }

[dir=ltr] .wt-chart-horizontal-first-child { border-radius: 0 .3rem 0 0; border-radius: 0 var(--chart-line-radius) 0 0; border-right: thin solid gray; border-right: var(--chart-line) }

[dir=rtl] .wt-chart-horizontal-first-child { border-left: thin solid gray; border-left: var(--chart-line); border-radius: .3rem 0 0 0; border-radius: var(--chart-line-radius) 0 0 0 }

.wt-chart-horizontal-middle-child { height: 100% }

[dir=ltr] .wt-chart-horizontal-middle-child { border-right: thin solid gray; border-right: var(--chart-line) }

[dir=rtl] .wt-chart-horizontal-middle-child { border-left: thin solid gray; border-left: var(--chart-line) }

.wt-chart-horizontal-last-child { height: 50% }

[dir] .wt-chart-horizontal-last-child { border-bottom: thin solid gray; border-bottom: var(--chart-line) }

[dir=ltr] .wt-chart-horizontal-last-child { border-radius: 0 0 .3rem 0; border-radius: 0 0 var(--chart-line-radius) 0; border-right: thin solid gray; border-right: var(--chart-line) }

[dir=rtl] .wt-chart-horizontal-last-child { border-left: thin solid gray; border-left: var(--chart-line); border-radius: 0 0 0 .3rem; border-radius: 0 0 0 var(--chart-line-radius) }

.wt-chart-horizontal-first-parent { height: 50%; position: relative; top: 50% }

[dir] .wt-chart-horizontal-first-parent { border-top: thin solid gray; border-top: var(--chart-line) }

[dir=ltr] .wt-chart-horizontal-first-parent { border-left: thin solid gray; border-left: var(--chart-line); border-radius: .3rem 0 0 0; border-radius: var(--chart-line-radius) 0 0 0 }

[dir=rtl] .wt-chart-horizontal-first-parent { border-radius: 0 .3rem 0 0; border-radius: 0 var(--chart-line-radius) 0 0; border-right: thin solid gray; border-right: var(--chart-line) }

.wt-chart-horizontal-last-parent { height: 50% }

[dir] .wt-chart-horizontal-last-parent { border-bottom: thin solid gray; border-bottom: var(--chart-line) }

[dir=ltr] .wt-chart-horizontal-last-parent { border-left: thin solid gray; border-left: var(--chart-line); border-radius: 0 0 0 .3rem; border-radius: 0 0 0 var(--chart-line-radius) }

[dir=rtl] .wt-chart-horizontal-last-parent { border-radius: 0 0 .3rem 0; border-radius: 0 0 var(--chart-line-radius) 0; border-right: thin solid gray; border-right: var(--chart-line) }

[dir] .wt-chart-box-m, [dir] .wt-chart-box-m .wt-chart-box-dropdown{ background-color: #f4fdff; }

[dir] .wt-chart-box-f, [dir] .wt-chart-box-f .wt-chart-box-dropdown{
background-color: #fff4f9; }

.wt-chart-hourglass .wt-chart-box {
border-radius: .25rem; box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02); font-size: .9rem;
padding: .5rem .625rem; }`

[photon-flip]

Also .wt-family-members .wt-chart-box { width: 15rem; /*fix family chart*/ } I hope it's ok posting code here. I'm not a regular github user. Wonderful theme. Great work jchue.

[jchue]

@photon-flip, it is absolutely OK for you to post code here, and thank you for investigating this! I think I've got it figured out already and will be releasing a fix shortly.

[jchue]

The charts should be fixed by 2b40a1b70b403699873c1e2ec8f6eb30f9ecd2b9. @photon-flip, could you try the latest release?

[photon-flip]

It looks like you've got that fixed ok. Thank you.