diff --git a/samples/unit-tests/series-treegraph/treegraph/demo.js b/samples/unit-tests/series-treegraph/treegraph/demo.js index 83bee546f8a..5b46723d736 100644 --- a/samples/unit-tests/series-treegraph/treegraph/demo.js +++ b/samples/unit-tests/series-treegraph/treegraph/demo.js @@ -134,5 +134,17 @@ QUnit.test('Treegraph series', 1, 'CollapseButton should be visible when point is expanded (#19368).' ); + + series.update({ + showInLegend: true, + legendSymbol: 'lineMarker' + }); + + assert.ok( + chart.series[0].legendItem.symbol.element && + chart.series[0].legendItem.line.element, + `Legend symbol and line should be rendered when + legendSymbol is set to lineMarker (#19671).` + ); } ); diff --git a/ts/Core/Legend/LegendSymbol.ts b/ts/Core/Legend/LegendSymbol.ts index 84cab8eb2f6..2071814fc77 100644 --- a/ts/Core/Legend/LegendSymbol.ts +++ b/ts/Core/Legend/LegendSymbol.ts @@ -94,6 +94,7 @@ namespace LegendSymbol { options = this.options, symbolWidth = legend.symbolWidth, symbolHeight = legend.symbolHeight, + symbol = this.symbol || 'circle', generalRadius = symbolHeight / 2, renderer = this.chart.renderer, legendItemGroup = legendItem.group, @@ -151,7 +152,7 @@ namespace LegendSymbol { ); // Restrict symbol markers size - if ((this.symbol as any).indexOf('url') === 0) { + if (symbol.indexOf('url') === 0) { markerOptions = merge(markerOptions, { width: symbolHeight, height: symbolHeight @@ -161,7 +162,7 @@ namespace LegendSymbol { legendItem.symbol = legendSymbol = renderer .symbol( - this.symbol as any, + symbol, (symbolWidth / 2) - radius, verticalCenter - radius, 2 * radius, diff --git a/ts/Series/Treegraph/TreegraphSeries.ts b/ts/Series/Treegraph/TreegraphSeries.ts index bc72d398521..a91d27cf0ab 100644 --- a/ts/Series/Treegraph/TreegraphSeries.ts +++ b/ts/Series/Treegraph/TreegraphSeries.ts @@ -532,40 +532,47 @@ class TreegraphSeries extends TreemapSeries { state?: StatesOptionsKey ): SVGAttributes { const series = this, - levelOptions = + levelOptions = point && (series.mapOptionsToLevel as any)[point.node.level || 0] || {}, - options = point.options, + options = point && point.options, stateOptions = (levelOptions.states && (levelOptions.states as any)[state as any]) || {}; - point.options.marker = merge( - series.options.marker, - levelOptions.marker, - point.options.marker - ); + + if (point) { + point.options.marker = merge( + series.options.marker, + levelOptions.marker, + point.options.marker + ); + } + const linkColor = pick( - stateOptions.link && stateOptions.link.color, - options.link && options.link.color, - levelOptions.link && levelOptions.link.color, + stateOptions && stateOptions.link && stateOptions.link.color, + options && options.link && options.link.color, + levelOptions && levelOptions.link && levelOptions.link.color, series.options.link && series.options.link.color ), linkLineWidth = pick( - stateOptions.link && stateOptions.link.lineWidth, - options.link && options.link.lineWidth, - levelOptions.link && levelOptions.link.lineWidth, + stateOptions && stateOptions.link && stateOptions.link.lineWidth, + options && options.link && options.link.lineWidth, + levelOptions && levelOptions.link && levelOptions.link.lineWidth, series.options.link && series.options.link.lineWidth ), attribs = seriesProto.pointAttribs.call(series, point, state); - if (point.isLink) { - attribs.stroke = linkColor; - attribs['stroke-width'] = linkLineWidth; - delete attribs.fill; - } - if (!point.visible) { - attribs.opacity = 0; + if (point) { + if (point.isLink) { + attribs.stroke = linkColor; + attribs['stroke-width'] = linkLineWidth; + delete attribs.fill; + } + if (!point.visible) { + attribs.opacity = 0; + } } + return attribs; }