This article explains how to create the dash pattern line chart in Flutter using the SfCartesianChart widget.
Cartesian chart provides the dash array support to the chart series. You can customize the chart series with dashed line by using the dashArray property in the series. To know more about dash array in our charts, find the
Follow these steps to render the dashed pattern line chart using the SfCartesianChart widget:
Step 1: First, declare and initialize the chartData with the required data source.
//Initialize the data source List<_ChartData> chartData = <_ChartData>[ _ChartData(2010, 6.6), _ChartData(2011, 6.3), _ChartData(2012, 6.7), _ChartData(2013, 6.7), _ChartData(2014, 6.4), _ChartData(2015, 6.8), _ChartData(2016, 7.7), ];
Step 2: Then, initialize the SfCartesianChart widget with required properties. Here, we have initialized the line type series.
SfCartesianChart( series: <LineSeries<_ChartData, num>>[ LineSeries<_ChartData, num>( // Binding the chartData to the dataSource of the line series. dataSource: chartData, xValueMapper: (_ChartData sales, _) => sales.x, yValueMapper: (_ChartData sales, _) => sales.y, ), ], ),
Step 3: Assign the value list of double values to the dashArray, in which the odd value in the list refers to the dash size and the even value in the list refers to the offset gap between the dashes.
SfCartesianChart( series: <LineSeries<_ChartData, num>>[ LineSeries<_ChartData, num>( // Dash array value in which 15 refers to size of the dashes and 3 refers to the offset gap between the dashes. dashArray: <double>[15, 3], ), ], ),
Thus, the dash pattern line chart achieved using the SfCartesianChart widget.
This page will automatically be redirected to the sign-in page in 10 seconds.