<LineChart
  width={width}
  height={height} 
  data={apiData} 
  zoomPan={<ChartZoomPan/>}
  yAxis={<LinearYAxis domain={
    type === "energy" 
      ? getMinY() < 1
        ? [getMinY(), (getMaxY())] 
        : [getMinY(), (getMaxY() + 1)]
      : getMinY() < 1 
        ? [0, (getMaxY()) + 2] 
        : [getMinY() - 2, (getMaxY() + 2)]
  }/>}
  series={<LineSeries symbols={<PointSeries show="hover"/>} 
    tooltip={
      <TooltipArea
        tooltip={
          <ChartTooltip
            content={(data) => (
              <TooltipTemplate
                className={`${darkMode ? "light label" : "dark label"}`}
                value={
                  type === "energy" 
                    ? {
                      x: formatValue((data.x).toLocaleTimeString("en",{ timeStyle: "short", hour12: true })),
                      y: formatValue(Math.abs(data.y))
                    }
                    : {
                      x: formatValue((data.x).toLocaleTimeString("en",{ timeStyle: "short", hour12: true })),
                      y: formatValue(Math.abs(data.y))
                    }
                }
              />
            )}
          />
        }
      />
    }
  />
  }
/>

yAxis={<LinearYAxis domain={
  type === "energy" 
    ? getMinY() < 1
      ? [0, (getMaxY() + (Math.ceil(getMaxY()) - getMaxY()))] 
      : [getMinY(), (getMaxY() + (getMaxY() * 0.05))]
    : getMinY() < 1 
      ? [0, (getMaxY()) + 1] 
      : [getMinY() - (getMinY() * 0.01), (getMaxY() + (getMaxY() * 0.01))]
}/>}

const intervals = [];

 for (let i = (Math.round(getMinY() * 2) / 2); i <= (Math.round(getMaxY() * 2) / 2); i++) {
      intervals.push(i);
    }

tickValues={reduceTicks(intervals, 10)}