How to render line at a specific value in Flutter CartesianChart?
In this article we explain how to render a line at the specific value using the Flutter SfCartesianChart widget.
Our Flutter Cartesian chart provides an option to render a line at a specific value using the plot band feature. The following steps explains how to add plot band feature in both x and y axes to add a line.
Render a line in x-axis
Step 1: Declare and initialize the required data source for the chart.
final List<ChartSampleData> chartData = <ChartSampleData>[ ChartSampleData(x: 'Jan', y: 23), ChartSampleData(x: 'Feb', y: 24), ChartSampleData(x: 'Mar', y: 23), ChartSampleData(x: 'Apr', y: 22), ChartSampleData(x: 'May', y: 21), ChartSampleData(x: 'Jun', y: 27), ChartSampleData(x: 'Jul', y: 33), ChartSampleData(x: 'Aug', y: 36), ChartSampleData(x: 'Sep', y: 23), ChartSampleData(x: 'Oct', y: 25), ChartSampleData(x: 'Nov', y: 22) ];
Step 2: Then initialize the SfCartesianChart widget and then initialize the axes with other required properties.
SfCartesianChart( primaryXAxis: CategoryAxis(), primaryYAxis: NumericAxis(), series: <LineSeries<ChartSampleData, String>>[ LineSeries<ChartSampleData, String>( dataSource: chartData, xValueMapper: (ChartSampleData data, _) => data.x, yValueMapper: (ChartSampleData data, _) => data.y) ], )
Step 3: Then add the plotBands property to the primaryXAxis and set the start and end value of the plot band as same value.
Here we have used the category axis as primaryXAxis, so you need to specify the index value in the start and end properties
SfCartesianChart( primaryXAxis: CategoryAxis( plotBands: <PlotBand>[ PlotBand( start: 7, end: 7, //Specify the width for the line borderWidth: 2,
//Specify the color for the line
borderColor: Colors.black, //Specify the dash array for the line dashArray: const <double>[4, 5]) ]), primaryYAxis: NumericAxis(), series: <LineSeries<ChartSampleData, String>>[ LineSeries<ChartSampleData, String>( dataSource: chartData, xValueMapper: (ChartSampleData data, _) => data.x, yValueMapper: (ChartSampleData data, _) => data.y) ], )
Render a line in y-axis
Step 1: Declare and initialize the required data source for the chart.
final List<ChartSampleData> chartData = <ChartSampleData>[ ChartSampleData(x: 'Jan', y: 23), ChartSampleData(x: 'Feb', y: 24), ChartSampleData(x: 'Mar', y: 23), ChartSampleData(x: 'Apr', y: 22), ChartSampleData(x: 'May', y: 21), ChartSampleData(x: 'Jun', y: 27), ChartSampleData(x: 'Jul', y: 33), ChartSampleData(x: 'Aug', y: 36), ChartSampleData(x: 'Sep', y: 23), ChartSampleData(x: 'Oct', y: 25), ChartSampleData(x: 'Nov', y: 22) ];
Step 2: Then initialize the SfCartesianChart widget and then initialize the axes with other required properties.
SfCartesianChart( primaryXAxis: CategoryAxis(), primaryYAxis: NumericAxis(), series: <LineSeries<ChartSampleData, String>>[ LineSeries<ChartSampleData, String>( dataSource: chartData, xValueMapper: (ChartSampleData data, _) => data.x, yValueMapper: (ChartSampleData data, _) => data.y) ], )
Step 3: Then add the plotBands property to the primaryXAxis and set the start and end value of the plot band as same value.
Here we have used the category axis as primaryXA, so you need to specify the index value in the start and end properties.
SfCartesianChart( primaryXAxis: CategoryAxis(), primaryYAxis: NumericAxis( plotBands: <PlotBand>[ PlotBand( start: 36, end: 36, //Specify the width for the line borderWidth: 2,
//Specify the color for the line
borderColor: Colors.black, //Specify the dash array for the line dashArray: const <double>[4, 5]) ]), series: <LineSeries<ChartSampleData, String>> [ LineSeries<ChartSampleData, String> ( dataSource: chartData, xValueMapper: (ChartSampleData data, _) => data.x, yValueMapper: (ChartSampleData data, _) => data.y) ], )
Conclusion
I hope you enjoyed learning how to render a line at a specific value in Flutter CartesianChart.
You can refer to our Flutter Cartesian Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flutter Cartesian Chart example to understand how to present and manipulate data.
For current customers, you can check out our WinForms components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our WinForms Edit control and other WinForms components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
