Make xAxis stickyBottom

[adoniscoder]

Is it possible to make the xAxis to be positioned sticky to the bottom so that when the chart is bigger than the user's screen height they would still see the labels ? Here's my code for xAxis:

const xAxis = chart.xAxes.push(
      am5xy.DateAxis.new(this.root, {
        baseInterval: { timeUnit: 'minute', count: 1 },
        renderer: am5xy.AxisRendererX.new(this.root, {
          minorGridEnabled: true,
          minGridDistance: 90
        })
      })
    )

[martynasma]

X-axis will always be displayed at the bottom of the chart with enough vertical space reserved for it to fit all the labels.

Unless you do something funky with your chart config, in which case we will need to take a look at your code.

[adoniscoder]

It's a matter of screen height, in this image the chart's height is not big but in some cases chart's height will be bigger than user's viewport so they have to scroll down to see the bottom labels, what I want is to have the ability to show the labels on xAxis all the time so that they won't need to scroll down and see them

[adoniscoder]

This is my code for the gantt chart

` if (this.root) { this.root.dispose() } this.root = am5.Root.new('chartdiv') this.root.dateFormatter.setAll({ dateFormat: 'HH:mm', dateFields: ['valueX', 'openValueX'] })

this.root.setThemes([
  am5themes_Animated.new(this.root)
])

const chart = this.root.container.children.push(am5xy.XYChart.new(this.root, {
  panX: false,
  panY: false,
  wheelX: 'panX',
  layout: this.root.verticalLayout,
  paddingLeft: 0
}))

const legend = chart.children.push(am5.Legend.new(this.root, {
  centerX: am5.p50,
  x: am5.p50,
  nameField: 'name',
  fillField: 'color',
  strokeField: 'color'
}))

const chartData = this.getChartData()

const yAxis = chart.yAxes.push(
  am5xy.CategoryAxis.new(this.root, {
    categoryField: 'category',
    renderer: am5xy.AxisRendererY.new(this.root, {
      inversed: true,
      minorGridEnabled: true
    }),
    tooltip: am5.Tooltip.new(this.root, {
      themeTags: ['axis'],
      animationDuration: 200
    })
  })
)

yAxis.data.setAll(this.getUniqueCategories())
const xAxis = chart.xAxes.push(
  am5xy.DateAxis.new(this.root, {
    baseInterval: { timeUnit: 'minute', count: 1 },
    renderer: am5xy.AxisRendererX.new(this.root, {
      minorGridEnabled: true,
      minGridDistance: 90
    })
  })
)
const series = chart.series.push(am5xy.ColumnSeries.new(this.root, {
  xAxis,
  yAxis,
  openValueXField: 'fromDate',
  valueXField: 'toDate',
  categoryYField: 'category',
  sequencedInterpolation: true
}))
series.columns.template.setAll({
  templateField: 'columnSettings',
  strokeOpacity: 0,
  tooltipText: '{team}: {openValueX} - {valueX}'
})

series.data.processor = am5.DataProcessor.new(this.root, {
  dateFields: ['fromDate', 'toDate'],
  dateFormat: 'yyyy-MM-dd HH:mm'
})
series.data.setAll(chartData)

chart.set('scrollbarX', am5.Scrollbar.new(this.root, {
  orientation: 'horizontal'
}))
legend.data.setAll(this.getLegendData())

series.appear()
chart.appear(1000, 100)

const cellSize = 15
series.events.on('datavalidated', function (ev) {
  const series = ev.target
  const chart = series.chart
  const xAxis = chart?.xAxes.getIndex(0)

  const chartHeight = series.data.length * cellSize + xAxis!.height() + chart!.get('paddingTop', 0) + chart!.get('paddingBottom', 0)

  chart!.root.dom.style.height = chartHeight + 'px'
})

`

[martynasma]

Do you mean that X-axis should change position based on web page scroll and always stick to its bottom?

I'm afraid there's no such built-in functionality.

[adoniscoder]

Yeah that's exactly what I want. Thanks for your help. I'm gonna close this issue :)