Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add a name to a chart on flutter, x- and y-axis?

I have been working with the online gallery of Flutter charts (https://google.github.io/charts/flutter/gallery.html) but I'm struggling to add a title for x & y axis values.

Can somebody help me or tell me how to add the labels to the graph?

like image 988
Eti Avatar asked Jun 20 '18 18:06

Eti


2 Answers

Its possible using behaviors property, check the code

 var chart = charts.LineChart(seriesList,
        behaviors: [
          new charts.ChartTitle('Dimension',
              behaviorPosition: charts.BehaviorPosition.bottom,
              titleStyleSpec: chartsCommon.TextStyleSpec(fontSize: 11),
              titleOutsideJustification:
              charts.OutsideJustification.middleDrawArea),
          new charts.ChartTitle('Dose, mg',
              behaviorPosition: charts.BehaviorPosition.start,
              titleStyleSpec: chartsCommon.TextStyleSpec(fontSize: 11),
              titleOutsideJustification:
              charts.OutsideJustification.middleDrawArea)
        ],
        defaultRenderer: new charts.LineRendererConfig(includePoints: true));

Source https://google.github.io/charts/flutter/example/behaviors/chart_title

like image 187
kashlo Avatar answered Oct 16 '22 21:10

kashlo


use the 'behavior' list for set title of chart

Widget build(BuildContext context) {
    return new charts.LineChart(
      seriesList,
      animate: animate,
      
      behaviors: [
        new charts.ChartTitle('Top title text',
            subTitle: 'Top sub-title text',
            behaviorPosition: charts.BehaviorPosition.top,
            titleOutsideJustification: charts.OutsideJustification.start,
           
            innerPadding: 18),
        new charts.ChartTitle('Bottom title text',
            behaviorPosition: charts.BehaviorPosition.bottom,
            titleOutsideJustification:
                charts.OutsideJustification.middleDrawArea),
        new charts.ChartTitle('Start title',
            behaviorPosition: charts.BehaviorPosition.start,
            titleOutsideJustification:
                charts.OutsideJustification.middleDrawArea),
        new charts.ChartTitle('End title',
            behaviorPosition: charts.BehaviorPosition.end,
            titleOutsideJustification:
                charts.OutsideJustification.middleDrawArea),
      ],
    );
  }
like image 27
ABHIJITH V M Avatar answered Oct 16 '22 19:10

ABHIJITH V M