Cannot use BarGauge from Grafana UI in custom plugin

Grafana Plugin Development
,
1

Hi, like in topic, I’m trying to use a simple BarGauge from Grafana UI in my custom plugin.
I’m receiving an error:

hook.js:608 TypeError: Cannot read properties of undefined (reading 'shape')
    at O (BarGauge.tsx:494:25)
    at b.renderBasicAndGradientBars (BarGauge.tsx:118:20)
    at b.renderBarAndValue (BarGauge.tsx:111:21)
    at b.render (BarGauge.tsx:99:15)

My code:

import * as React from 'react';

import { BarGauge, BarGaugeDisplayMode, useTheme2 } from '@grafana/ui';
import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data';



export const BarGau = ({ }) => {
    const theme = useTheme2()
    const field: Partial<Field> = {
        type: FieldType.number,
        config: {
          min: 0,
          max: 10000,
          thresholds: {
            mode: ThresholdsMode.Absolute,
            steps: [
              { value: -Infinity, color: 'green' },
              { value: 40, color: 'orange' },
              { value: 60, color: 'red' },
            ],
          },
        },
      };
      field.display = getDisplayProcessor({ field, theme });


      const value = {
        text: '100',
        title: '100',
        numeric: 100,
      };

    return(
        <>
            <BarGauge
                field={field.config}
                value={value}
                orientation={VizOrientation.Vertical}
                displayMode={BarGaugeDisplayMode.Gradient}
            />
        </>
    )
}

I tried to just recreate use case from Storybook without any additions.
Can anyone help me on that?
Thanks :slight_smile:

2

Hi @adamhowaniec the component should work as long as you are passing all the necessary props. However there is always the possibility of an error in the library. Try the following:

  • Use the latest available version of grafana/ui this will require you to manually upgrade it e.g.: npm install @grafana/ui@latest, make sure to use your project’s package manager.
  • share the full code of your plugin so we can take a look and if there’s an error we can report it to the responsible team.