Migration issues

[Webierta]

Hello, can you help me migrate this code to the new version.

1. This way I could only see the current time bubble:

itemOptions: BubbleItemOptions(
    colorForValue: (_, value, [min]) {
        horaValor++;
        if (horaValor > 23) {
            horaValor = 0;
        }
        if (value != null) {                  
            if (hora == horaValor) {
                return Colors.white;
            }
        }
        return Colors.transparent;
    },
),

This doesn't work because it draws the bubble at the bottom:

itemOptions: BubbleItemOptions(
    maxBarWidth: 4,
    bubbleItemBuilder: (data) {
        if (data.itemIndex == hora) {
            return const BubbleItem(color: Colors.white);
        }
        return const BubbleItem(color: Colors.transparent);
    },
),

2. This is how I managed to draw the middle line of the data:

backgroundDecorations: [
    TargetLineDecoration(
        target: dataHoy.calcularPrecioMedio(dataHoy.preciosHora),
        targetLineColor: Colors.blue,
        lineWidth: 1,
    ),
],

Thank you

[lukaknezic]

Hey @Webierta.

I'm not really sure what is the issue. Can you show me in screen shoot? I tried making chart with code you provided but I really don't see what would be the issue. I don't see the data point if you set color to transparent.

[Webierta]

Hello, I am attaching two screenshots. In the image called old with charts_painter: ^1.1.0, you can see the bubble above the data line. In the image called new with charts_painter: ^3.1.1 the bubble is seen below the data line.

[lukaknezic]

Okay I understand the issue now. Are you maybe using multiple Charts in Stack? I cannot reproduce it. Can you provide standalone Chart code where this is reproducable?

I'm using this to try and reproduce this:

Chart<void>(
  state: ChartState(
    data: ChartData.fromList([
      ChartItem(2),
      ChartItem(5),
      ChartItem(8),
      ChartItem(3),
      ChartItem(6),
    ]),
    backgroundDecorations: [
      GridDecoration(),
    ],
    foregroundDecorations: [
      SparkLineDecoration(),
    ],
    itemOptions: BubbleItemOptions(
      maxBarWidth: 20,
      bubbleItemBuilder: (data) {
        if (data.itemIndex == 3) {
          return const BubbleItem(color: Colors.red);
        }
        return const BubbleItem(color: Colors.transparent);
      },
    ),
  ),
)

[Webierta]

import 'package:charts_painter/chart.dart';
import 'package:flutter/material.dart';

class TestScreen extends StatelessWidget {
  const TestScreen({super.key});

  @override
  Widget build(BuildContext context) {
    List<double> precios = [0.5, 0.8, 0.2, 0.1, 0.9];
    double altoScreen = MediaQuery.of(context).size.height;

    return Container(
      color: Colors.blue,
      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
      width: double.infinity,
      height: altoScreen / 3,
      child: Chart(
        state: ChartState<void>(
          data: ChartData.fromList(
            precios.map((e) => ChartItem<void>(e)).toList(),
            //axisMin: axisMin,
          ),
          itemOptions: BubbleItemOptions(
            maxBarWidth: 4,
            bubbleItemBuilder: (data) {
              if (data.itemIndex == 1) {
                return const BubbleItem(color: Colors.white);
              }
              return const BubbleItem(color: Colors.transparent);
            },
          ),
          backgroundDecorations: [
            HorizontalAxisDecoration(
              axisStep: 0.01,
              showLines: true,
              lineWidth: 0.1,
            ),
            VerticalAxisDecoration(
              showLines: true,
              lineWidth: 0.1,
              legendFontStyle: Theme.of(context)
                  .textTheme
                  .bodySmall!
                  .copyWith(fontSize: 10, color: Colors.white54),
              legendPosition: VerticalLegendPosition.bottom,
              axisStep: 1.0,
              showValues: true,
            ),
            /* TargetLineDecoration(
              target: dataHoy.calcularPrecioMedio(dataHoy.preciosHora),
              targetLineColor: Colors.blue,
              lineWidth: 1,
            ), */
          ],
          foregroundDecorations: [
            SparkLineDecoration(
              lineColor: Colors.white,
              lineWidth: 2,
              smoothPoints: true,
            ),
          ],
        ),
      ),
    );
  }
}