How to use the @elastic/charts.getAxisId function in @elastic/charts

});
    },
    [setTimeRange]
  );

  return (
    <div style="{{">
      
        
         numeral(value.toPrecision(3)).format('0[.][00]a')} // https://github.com/adamwdraper/Numeral-js/issues/194
        /&gt;
        
        {renderAnnotations(annotations, chartId, renderAnnotationTooltip)}</div>

export const Axes: FC = ({ chartData }) => {
  const yDomain = chartData !== undefined ? getYRange(chartData) : undefined;

  return (
    
      
      
    
  );
};

}>(({ data, ...chartConfigs }) => {
  const xTickFormatter = get('configs.axis.xTickFormatter', chartConfigs);
  const yTickFormatter = get('configs.axis.yTickFormatter', chartConfigs);
  const tickSize = getOr(0, 'configs.axis.tickSize', chartConfigs);
  const xAxisId = getAxisId(`stat-items-barchart-${data[0].key}-x`);
  const yAxisId = getAxisId(`stat-items-barchart-${data[0].key}-y`);
  const settings = {
    ...chartDefaultSettings,
    ...get('configs.settings', chartConfigs),
  };
  return chartConfigs.width && chartConfigs.height ? (
    
      
      {data.map(series => {
        const barSeriesKey = series.key;
        const barSeriesSpecId = getSpecId(barSeriesKey);
        const seriesType = SeriesType.BAR;
        return checkIfAllTheDataInTheSeriesAreValid ? (

)}
        <div width="" style="{{">
          {series.rows.length &gt; 0 ? (
            
              {metrics.map((metric, id) =&gt; (
                
              ))}
              
              
              
            
          ) : options.metrics.length &gt; 0 ? (
            
          ) : (
            
          )}
        </div>
      
    );
  }
);

const tooltipProps = {
      headerFormatter: this.renderBarTooltip(xInterval, domainStart, domainEnd),
      type: TooltipType.VerticalCursor,
    };

    return (

export const MonitorBarSeries = ({
  absoluteStartDate,
  absoluteEndDate,
  dangerColor,
  histogramSeries,
}: MonitorBarSeriesProps) => {
  const id = getSpecId('downSeries');

  return seriesHasDownValues(histogramSeries) ? (
    <div style="{{">
      
        
        
         [timestamp, down])}
          id={id}
          name={i18n.translate('xpack.uptime.monitorList.downLineSeries.downLabel', {
            defaultMessage: 'Down checks',
          })}
          timeZone="local"
          xAccessor={0}
          xScaleType={ScaleType.Time}
          yAccessors={[1]}
          yScaleType={ScaleType.Linear}
        /&gt;</div>

)}
      <div width="" style="{{">
        {series.rows.length &gt; 0 ? (
          
            {metrics.map((metric, id) =&gt; (
              
            ))}
            
            
            
          </div>

type={chartOptions.type}
                key={id}
                metric={metric}
                id={id}
                series={series}
                stack={chartOptions.stack}
              />
            ))}
            
            
            
          
        ) : options.metrics.length > 0 ? (
          
        ) : (
          
        )}

{yAxis.map(({ id, groupId, position, tickFormatter, domain, hide }) => (
        
      ))}

      
    
  );
};