CODEWITHSUNDEEP
flutterdartcharts
kyle bates
kyle bates

Reputation: 40

Show custom target line on horizontal bar chart with flutter charts

I'm using flutter charts to add some charts to my flutter app, and one of the charts is a horizontal bar chart that lists percentages. I need to add a vertical line at 100 so that there is always a reference to 100%.

I've tried adding charts.RangeAnnotation([charts.LineAnnotationSegment(100, charts.RangeAnnotationAxisType.measure)])

But the bar chart is horizontal and the line annotation remains horizontal so it gets placed below the graph.

My current chart looks like this

Here is the code for the chart:

charts.BarChart(
  series,
  animate: true,
  vertical: false,
  behaviors: [
    charts.ChartTitle(name, titleStyleSpec: charts.TextStyleSpec(color: charts.Color.white,)),
    charts.RangeAnnotation([charts.LineAnnotationSegment(100, charts.RangeAnnotationAxisType.measure, color: charts.MaterialPalette.white, endLabel: '100%')])
  ],
  barRendererDecorator: charts.BarLabelDecorator(),
  domainAxis: charts.OrdinalAxisSpec(renderSpec: charts.NoneRenderSpec()),
  customSeriesRenderers: [charts.BarTargetLineRendererConfig(customRendererId: 'target')],
  selectionModels: [charts.SelectionModelConfig(type: charts.SelectionModelType.info)],
)

And the series:

charts.Series(
  id: name,
  data: [
    NutrientData(data['Total Fat'], 'Total Fat', colors[0]),
    NutrientData(data['Saturated Fat'], 'Saturated Fat', colors[1]),
    NutrientData(data['Cholesterol'], 'Cholesterol', colors[2]),
    NutrientData(data['Sodium'], 'Sodium', colors[3]),
    NutrientData(data['Total Carbs'], 'Total Carbs', colors[4]),
    NutrientData(data['Fiber'], 'Fiber', colors[5]),
    NutrientData(data['Sugar'], 'Sugar', colors[6]),
    NutrientData(data['Protein'], 'Protein', colors[7]),
  ],
  domainFn: (NutrientData data, _) => data._name,
  measureFn: (NutrientData data, _) => (data._data / dailyValues[data._name] * 100).toInt(),
  colorFn: (NutrientData data, _) => data._color,
  labelAccessorFn: (NutrientData data, _) => '${data._name}: ${data._data}${nutrientUnits[data._name]}',
  outsideLabelStyleAccessorFn: (NutrientData data, _){
    final color = (data._data > dailyValues[data._name]) ? charts.Color.fromHex(code:'#b71c1c') : charts.MaterialPalette.white;
    return charts.TextStyleSpec(color: color);
  },
  insideLabelStyleAccessorFn: (NutrientData data, _){
    final color = (data._data > dailyValues[data._name]) ? charts.Color.fromHex(code:'#b71c1c') : charts.MaterialPalette.white;
    return charts.TextStyleSpec(color: color);
  }
),

Upvotes: 1

Views: 2650

Answers (1)

Mateus Siqueira Batista
Mateus Siqueira Batista

Reputation: 26

change charts.RangeAnnotationAxisType.measure to charts.RangeAnnotationAxisType.domain

Upvotes: 1

Related Questions