HTML labels are not visible on chart export

[Ashishvkale]

Below is how I'm adding the labels to the columnseries:

const label = am5.Label.new(this.root, {
                html: "{columnTitle}",
                // text: "{columnTitle}",
                // populateText: true,
                centerY: am5.p50,
                paddingLeft: this.activityLabelPaddingLeft,
                paddingRight: this.activityLabelPaddingRight
            })

            label.events.on("boundschanged", (event) => {
                if (event.target.dataItem) {
                    const title = event.target.dataItem.dataContext as any
                    // @ts-ignore this is needed
                    const textColorOnActivity = title.statusSvgColor
                        ? am5.color(whiteOrBlackText(title.statusSvgColor) === "black" ? "#000" : "#fff")
                        : am5.color(this.$store.state.userPreferences.darkMode ? "#fff" : "#000")

                    const remainingColor = am5.color(this.$store.state.userPreferences.darkMode ? "#fff" : "#000")
                    let titleToPrint = title.columnTitle
                    if (this.displayDates && this.downloadingTimeline && title.status && title.start && title.end) {
                        const startDate = DateTime.fromMillis(title.start).toFormat("LLL dd")
                        const endDate = DateTime.fromMillis(title.end).toFormat("LLL dd")
                        titleToPrint = `${title.columnTitle} (${startDate} - ${endDate})`
                        console.log("changed title")
                    }

                    // @ts-ignore this is needed
                    if (event.target.dataItem.get("graphics")) {
                        const activityWidth = event.target.maxWidth()
                        const bounds = event.target.localBounds()
                        const measuredWidth = bounds.right

                        if (measuredWidth > activityWidth && this.root) {
                            const overhangPixels = measuredWidth - activityWidth

                            event.target.set(
                                "html",
                                `<span style="background:linear-gradient(to left, ${remainingColor} 0px, ${remainingColor} ${overhangPixels}px, ${textColorOnActivity} 20px); color: transparent; background-clip: text;">${titleToPrint}</span>`
                            )
                        } else {
                            event.target.set(
                                "html",
                                `<span style="background-color: ${textColorOnActivity}; color: transparent; background-clip: text;">${titleToPrint}</span>`
                            )
                        }
                    }
                }
            })

            columnSeries.bullets.push(() => {
                return am5.Bullet.new(localRoot, {
                    locationX: 0,
                    sprite: label
                })
            })

On exporting the chart the labels getting faded away

Any another way to make them stay while exporting as PNG ??

[martynasma]

HTML content will not be included in the export because it cannot be reliably rendered as canvas by JS.

This is mentioned in the docs: https://www.amcharts.com/docs/v5/concepts/common-elements/html-content/#Exporting

[Ashishvkale]

@martynasma Thanks for the clarification Last question : Any another way to customise the label text with multiple colors ?

[martynasma]

Any another way to customise the label text with multiple colors ?

Yes: https://www.amcharts.com/docs/v5/concepts/formatters/text-styling/

[Logikgate]

@martynasma thanks for that link. The issue is that the point at which we need to transition the color on the label is dynamic so those formatters won't work. I have opened a pull request to add the ability for a LinearGradient to be used as the fill for a label #1648. Could you review and let me know if this is something that could possibly be merged?

[martynasma]

Two things:

1) We can't accept main code contributions via pull requests for legal reasons. 2) In amCharts 5, gradients are set via separate setting (fillgradient) on elements that support it. If we were to add it to Label, we would do it that way for consistency.

We can consider adding it on our own. Please refer to https://github.com/amcharts/amcharts5/issues/1636 to track the progress as it's more suitable for this enhancement.