Not able to display a label using <Meter> component from grommet

Question

I am unable to display label separately for my graph.

const Demo = () => (
  <Box>
    {['bar', 'circle'].map(type => (
      <Box key={type} margin={{ bottom: 'xsmall' }}>
        <Meter
          type={type}
          size='small'
          values={[
            { value: 60, label: 'sixty', onClick: () => alert('60') },
          ]}
        />
      </Box>
    ))}
  </Box>      
);

render(<Demo />);

here, it doesn't display label: sixty on side of the graph. Would you suggest me how do i get this one displayed. Thanks.

Answer 1

You can place the label as you see fit using the Text component:

const Demo = () => (
  <Box>
    {['bar', 'circle'].map(type => (
      <Box gap="medium" key={type} margin={{ bottom: 'xsmall' }}>
        <Text>Label</Text>
        <Meter
          type={type}
          size='small'
          values={[
            { value: 60, label: 'sixty', onClick: () => alert('60') },
          ]}
        />
      </Box>
    ))}
  </Box>      
);

render(<Demo />);

In a similar fashion, you can move the Text around the component, currently, it will display on the top, but you can move it to be placed on the bottom, left, right, of the Meter, and even use the Stack component to place the label in the middle of the Meter, I hope it answers your question.