Space between last candle and y axis

[Bar Ilan]

Hi,

Is it possible to make space between the last candle and the y axis like in the pic below.

Also is there any option to design the candles border color? 

[Hariharasudhan Kanagaraj]

Hi Bar IIan,

To achieve your requirement, you can follow the ways mentioned below:

1. You can use the ChartRangePadding as additional in the rangePadding property. Shared the User Guide documentation regarding rangePadding for your reference below. UG: https://help.syncfusion.com/flutter/cartesian-charts/axis-types#applying-padding-to-the-range.
2. You can use the plotOffset property. Shared the User Guide documentation regarding plotOffset for your reference below. UG: https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#offset-the-rendering.
3. To add space as per your requirement, you can set the maximum property at the x axis based on your data points given.

Regards,

Hari Hara Sudhan. K.

[Bar Ilan]

I'm trying to use the third way but i dont get any space/.

[Bar Ilan]

Is there any option to design the candles?

[Hariharasudhan Kanagaraj]

Hi Bar IIan,

Query 1: I'm trying to use the third way, but I don’t get any space.

In the attached sample below, we have rendered the Candle Series with the maximum data point value of 10 in x axis and by assigning the maximum property as 15, the required space is rendered. Modify the attached sample below based on your requirement and If you have further queries, please get back to us.

Kindly refer the code snippet below:

class _MyHomePageState extends State<MyHomePage> {

  late List<ChartSampleData> _data;

 

  @override

  void initState() {

    _data = [

      ChartSampleData(x: 01, high: 20, low: 50, open: 35, close: 45),

      ChartSampleData(x: 02, high: 60, low: 30, open: 45, close: 55),

      ChartSampleData(x: 03, high: 20, low: 50, open: 35, close: 45),

      ChartSampleData(x: 04, high: 40, low: 10, open: 20, close: 30),

      ChartSampleData(x: 05, high: 30, low: 20, open: 25, close: 30),

      ChartSampleData(x: 06, high: 70, low: 40, open: 70, close: 40),

      ChartSampleData(x: 07, high: 90, low: 60, open: 80, close: 60),

      ChartSampleData(x: 08, high: 50, low: 20, open: 20, close: 30),

      ChartSampleData(x: 09, high: 100, low: 70, open: 80, close: 90),

      ChartSampleData(x: 10, high: 80, low: 50, open: 60, close: 70),

    ];

    super.initState();

  }

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: SfCartesianChart(

        primaryXAxis: NumericAxis(

          maximum: 15,

        ),

        primaryYAxis: NumericAxis(),

        series: <CartesianSeries<ChartSampleData, num>>[

          CandleSeries(

            dataSource: _data,

            xValueMapper: (ChartSampleData sales, int index) => sales.x,

            highValueMapper: (ChartSampleData sales, int index) => sales.high,

            lowValueMapper: (ChartSampleData sales, int index) => sales.low,

            openValueMapper: (ChartSampleData sales, int index) => sales.open,

            closeValueMapper: (ChartSampleData sales, int index) => sales.close,

          ),

        ],

      ),

    );

  }

}

Snapshot:

Query 2: Is there any option to design the candles?

The Candle Series will be rendered based on the following cases:

If the closing value of the current segment is greater than the opening value of the current segment, a hollow Candle segment will be rendered, and the border color will be applied based on the bull color and bear color.

If the closing value of the current segment is less than the opening value of the current segment, a Solid  Candle segment will be rendered, and the fill color will be applied based on the bull color and bear color.

If the closing value of the current segment is greater than the closing value of the previous segment, the bull color will be applied to the Candle Segment.

If the closing value of the current segment is less than the closing value of the previous segment, the bear color will be applied to the Candle Segment.

As this is the behavior of the Candle Series, there is no option to design the border color of the Candle Series.

Regards,
Hari Hara Sudhan. K.

Attachment: 183685_29653c10.zip