CategoryAxis with splineSeries and Column overlap issue

[Ole]

Hi, 
We have a chart that looks something like the picture below

this chart has data points for every hour of the day. 
Each green bar, is power consumption per hour. 
so first bar would be consumption between 00:00 to 01:00 at night. 
The blue line, is the price for power that hour. 

Our issue is that the blue starts "in the middle" of the chart. 
Is there a way to get the blue line here to start a first tick, and then the "break" for next datapoint is the following tick 
Ending up something like this : 

[Yuvaraj Gajaraj]

Hi Ole,

We are validating your query at our end and we will update further details in one business day on 13 Dec 2022. We appreciate your patience until then.

Regards,

Yuvaraj.

[Yuvaraj Gajaraj]

Hi Ole,

When having a CategoryAxis the series always start rendering between two ticks only instead of the edge of the chart. However, you can resolve this issue by using the following suggestions.

1. If you want to render a series from the edge of the chart area you can set the CategoryAxis property labelPlacement to onTicks then it will start rendering at the edge of the chart. 

 Code snippet:          

SfCartesianChart(

primaryXAxis: CategoryAxis(

labelPlacement: LabelPlacement.onTicks,

),

// Other required properties

)

[OR]

     2. Add a secondary x-axis with the help of the axes property and set the labelPlacement to onTicks and map with step line series using xAxisName property.

         . 

Code snippet:

SfCartesianChart(

axes: [

CategoryAxis(

name: 'xAxis',

labelPlacement: LabelPlacement.onTicks,

isVisible: false)

],

series: <ChartSeries<ChartData, String>>[

ColumnSeries(

// Required properties

),

StepLineSeries(

xAxisName: 'xAxis',

// Other required properties

)

],

),

Screenshot:

We have shared the sample below for your reference.

Regards,

Yuvaraj.

Attachment: f179342_d8958b51.zip