amcharts / amcharts5

The newest, fastest, and most advanced amCharts charting library for JavaScript and TypeScript apps.
Other
345 stars 92 forks source link

Title is not sticking to the left most position #1646

Closed Ashishvkale closed 1 month ago

Ashishvkale commented 1 month ago

image

Above is image where the group titles for the columns are moving when scrollbarX is moved This is how I want them to stick to left (no matter chart is getting scrolled left or right)

image

Below is how I'm adding that label:


    public createColumnsSeries(value: any): void {
        if (this.chart && this.root && this.categoryAxis && this.dateAxis) {
            // create column chart series
            // const index = this.columnSeriesArray.length
            const columnSeries = this.chart.series.push(
                am5xy.ColumnSeries.new(this.root, {
                    name: "MainColumnSeries",
                    xAxis: this.dateAxis,
                    yAxis: this.categoryAxis,
                    openValueXField: "start",
                    valueXField: "end",
                    categoryYField: "categorySeries",
                    paddingLeft: 0,
                    clustered: false
                })
            )

            this.columnSeriesArray.push(columnSeries)
            columnSeries.data.processor = am5.DataProcessor.new(this.root, {
                dateFields: ["start", "end"]
            })

            columnSeries.data.setAll(value)

            columnSeries.columns.template.setAll({
                strokeOpacity: 0,
                cornerRadiusTL: 7,
                cornerRadiusTR: 7,
                cornerRadiusBL: 7,
                cornerRadiusBR: 7,
                height: am5.percent(90),
                cursorOverStyle: "pointer",
                tooltipHTML: "<div>placeholder see adapter below for actual html</div>",
                tooltipPosition: "pointer",
                hoverOnFocus: true,
                tooltipX: am5.percent(50),
                tooltipY: am5.percent(0)
            })

            const localRoot = this.root

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

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

Any way to achieve the same ??

Ashishvkale commented 1 month ago

@martynasma @Pauan @zeroin @efitzkiwi Any specific reason why the lables are not getting sticked to the left part Even if given position absolute and fixed ? Seamlessly working in amcharts4 but not in amcharts5 ?