Ag Charts Candlestick series - candle center does not correspond to time point on xAxis

Question

I'm using ag-charts-enterprise trial and trying to display candlesticks as well as High and Low price lines on the same chart. The problem I have is that candles are not centered around the time point, for which they are rendered. This makes candlestick series "shift" to the right.

Ideally, I want candles wicks for high and low price to touch nodes of the High and Low price lines correspondingly.

Here's chart configuration I use:

// Chart Options Configuration
            const options = {
                container: document.getElementById("agChart"),
                dataSource: {
                    getData: this.fetchData.bind(this),
                },
                // Series: Defines which chart type and data to use
                series: [
                    {
                        type: "candlestick",
                        xKey: "date",
                        lowKey: "low",
                        highKey: "high",
                        openKey: "open",
                        closeKey: "close",
                     
                    },
                    {
                        type: "line",
                        xKey: "date",
                        yKey: "high",
                      
                    },
                    {
                        type: "line",
                        xKey: "date",
                        yKey: "low",
                    }
                ],
                // Axes: Configure the axes for the chart
                axes: [
                    // Display category (xKey) as the bottom axis
                    {
                        type: "time",
                        position: "bottom",
                        nice: false,
                        gridLine: {
                            enabled: true,
                        },
                        max: new Date(),
                        min: new Date(2024, 11, 1),
                        keys: ["date"],
                        interval: { step: time.hour.every(6) },
                    },
                    // Use right axis for price series
                    {
                        type: "number",
                        position: "right",
                        gridLine: {
                            enabled: true,
                        },
                        keys: ["low", "high", "open", "close"],
                    }
                ],
                // Legend: Matches visual elements to their corresponding series or data categories.
                legend: {
                    position: "right",
                },
                zoom: {
                    enabled: true
                },
                initialState: {
                    zoom: {
                        rangeX: {
                            start: {
                                __type: 'date',
                                value: new Date('2024-12-20').getTime(),
                            },
                            end: {
                                __type: 'date',
                                value: new Date('2024-12-25').getTime(),
                            },
                        },
                    }
                }
            };

One note is that if I remove xAxis configuration altogether and just use defaults, everything is rendered correctly, but that doesn't work for me, I need custom xAxis config.

Answer 1

Thank you for reporting this - much appreciated!

Based on your description we've now reproduced this issue as a bug in version 11.0.0.

The bug occurs when you use the candlestick or OHLC series with a time series. It does work correctly with the ordinal-time axis.

We have added this bug to our backlog and we are tracking it with the following reference and description: AG-13776 - [Charts] Regression: Candlestick Series is incorrectly aligned on time axis

We try to fix bugs from one release to the next, so this should be fixed in the next release or the one after if it was raised too close to the next release date.

See whether this item will be in the next release by checking the NEXT RELEASE checkbox on the product pipeline page: https://ag-grid.com/charts/pipeline/

The best way to track this is to sign up for AG Charts new release notifications using the instructions here. This way you'll know as soon as a new version is out and you can check whether this specific item was implemented on the changelog page.

Thanks again for bringing this up with us.

Kind regards,

David