How to create dash pattern line chart in Flutter using cartesian charts widget (SfCartesianChart) ?

Description

This article explains how to create the dash pattern line chart in Flutter using the SfCartesianChart widget.

Solution

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 user guide.

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.

Screenshot

View the sample in GitHub.