Search code examples
fluttersyncfusionsyncfusion-chart

is it possible to create custom legend items


I want to create custom legend item instead of the default one which just shows series 0, is it possible to do so when creating a SfCatesian line chart ?

SfCartesianChart(
          legend: Legend(
            isVisible: true,
            position: LegendPosition.right,
            toggleSeriesVisibility: true,
            title: LegendTitle(text:'Sales by day',)),
          margin: EdgeInsets.only(top: 25),
          plotAreaBorderWidth: 0,
          enableAxisAnimation: true,
          primaryXAxis: CategoryAxis(
              majorGridLines: const MajorGridLines(width: 0, color: Colors.transparent)),
          primaryYAxis: NumericAxis(
              minimum: 0,
              maximum: 5,
              interval: 1,
              opposedPosition: true,
              axisLine: const AxisLine(width: 0),
              majorTickLines: const MajorTickLines(size: 0)),
          series: <LineSeries<_ChartData, String>>[
      LineSeries<_ChartData, String>(
        name: "Daily sales",
          animationDuration: 2500,
          dataSource: <_ChartData>[
            _ChartData('Mon', 3,  Color.fromRGBO(255, 0, 0, 1)),
            _ChartData('Tues', 4, Color.fromRGBO(0, 255, 0, 1)),
            _ChartData('Wed', 3, Color.fromRGBO(0, 0, 255, 1)),
          ],
          xValueMapper: (_ChartData sales, _) => sales.x,
          yValueMapper: (_ChartData sales, _) => sales.y,
          pointColorMapper: (_ChartData sales, _) => sales.lineColor,
          width: 2,)];,
        );

Solution

  • We suggest you the legendItemBuilder property in the legend, using this you can be able to customize the legend item based on your requirement. We have shared the demo sample, UG, and KB link below for your reference.

    Sample: https://flutter.syncfusion.com/#/cartesian-charts/legend/chart-with-customized-legend

    UG: https://help.syncfusion.com/flutter/cartesian-charts/legend#legend-item-template

    KB: https://www.syncfusion.com/kb/13055/