Articles in this section
Category / Section

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

3 mins read

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

 

dash_pattern_line

 

 

View the sample in GitHub.

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied