We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: Flutter |
Control: SfCartesianChart |
Published Date: February 9, 2021 |
Last Revised Date: February 9, 2021


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

 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.

 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.






View the sample in GitHub.


You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile