Show custom target line on horizontal bar chart with flutter charts

Question

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);
  }
),

Solution

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

Comments

[Nico Haase]

Please add some explanation to your answer such that others can learn from it

[Dima Kozhevin]

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.