Appearance Of SfCartesian Charts

Chart sizing

Chart renders based on the parent widget size. If you need the chart to be rendered in specific size, then set the size(width/height) to the parent widget.

dart

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: SafeArea(
          child: Center(
            child: Container(
              height: 300, // height of the Container widget
              width: 350,  // width of the Container widget
              child: SfCartesianChart()
            )
          )
        )
      );
    }

Chart margin

Margin to the chart can be specified using the margin property.

dart

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: SafeArea(
          child: Center(
        child: Container(
          height: 300, 
          width: 350, 
          child: SfCartesianChart(
              borderColor: Colors.red,
              borderWidth: 2,
              // Sets 15 logical pixels as margin for all the 4 sides.
              margin: EdgeInsets.all(15)
          )
        )
      );
    }

Plot area customization

You can customize the plot area of the chart using the below properties.

• plotAreaBackgroundColor – used to change the plot area background color.
• plotAreaBorderColor – used to change the stroke width of the plot area.
• plotAreaBorderWidth – used to change the stroke color of the plot area.
• plotAreaBackgroundImageUrl - used to set the image path.

dart

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: SafeArea(
          child: Center(
            child: Container(
              height: 300, 
              width: 350, 
              child: SfCartesianChart(
                plotAreaBorderWidth: 5,
                plotAreaBorderColor: Colors.red,
                plotAreaBackgroundColor: Colors.lightGreen,
                plotAreaBackgroundImageUrl: 'images/livechart.png'
              )
            )
          )
        )
      );
    }