diff --git a/src/plugins/vis_type_timelion/public/components/timelion_vis_component.tsx b/src/plugins/vis_type_timelion/public/components/timelion_vis_component.tsx
index a5b1f3ae12186b..f4ec1a8a58e1a3 100644
--- a/src/plugins/vis_type_timelion/public/components/timelion_vis_component.tsx
+++ b/src/plugins/vis_type_timelion/public/components/timelion_vis_component.tsx
@@ -19,7 +19,15 @@
 
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { compact, cloneDeep, last, map } from 'lodash';
-import { Chart, Settings, Position, Axis, TooltipType, YDomainRange } from '@elastic/charts';
+import {
+  Chart,
+  Settings,
+  Position,
+  Axis,
+  TooltipType,
+  YDomainRange,
+  BrushEndListener,
+} from '@elastic/charts';
 
 import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
 import { useKibana } from '../../../kibana_react/public';
@@ -27,7 +35,7 @@ import { useKibana } from '../../../kibana_react/public';
 import { AreaSeriesComponent } from './area_series';
 import { BarSeriesComponent } from './bar_series';
 
-import { buildOptions, colors, Axis as IAxis, Options } from '../helpers/panel_utils';
+import { createTickFormat, colors, Axis as IAxis } from '../helpers/panel_utils';
 import { tickFormatters } from '../helpers/tick_formatters';
 
 import { Series, Sheet } from '../helpers/timelion_request_handler';
@@ -52,9 +60,6 @@ function TimelionVisComponent({
 }: TimelionVisComponentProps) {
   const kibana = useKibana<TimelionVisDependencies>();
   const [chart, setChart] = useState(() => cloneDeep(seriesList.list));
-  const [options, setOptions] = useState<Options>(
-    buildOptions(interval, kibana.services.timefilter, kibana.services.uiSettings)
-  );
 
   const updateYAxes = function (yaxes: IAxis[]) {
     yaxes.forEach((yaxis: IAxis) => {
@@ -95,29 +100,23 @@ function TimelionVisComponent({
     setChart(newChart);
   }, [seriesList.list]);
 
-  useEffect(() => {
-    setOptions(buildOptions(interval, kibana.services.timefilter, kibana.services.uiSettings));
-  }, [interval, kibana.services.timefilter, kibana.services.uiSettings]);
-
   // temp solution, will be changed after fix https://github.com/elastic/elastic-charts/issues/878
   const getLegendPosition = useCallback(() => {
     const chartGlobal = chart[0]._global;
-    if (chartGlobal && chartGlobal.legend) {
-      switch (chartGlobal.legend.position) {
-        case 'ne':
-          return Position.Right;
-        case 'nw':
-          return Position.Left;
-        case 'se':
-          return Position.Right;
-        case 'sw':
-          return Position.Left;
-      }
+    switch (chartGlobal?.legend.position) {
+      case 'ne':
+        return Position.Right;
+      case 'nw':
+        return Position.Left;
+      case 'se':
+        return Position.Right;
+      case 'sw':
+        return Position.Left;
     }
     return Position.Left;
   }, [chart]);
 
-  const brushEndListener = useCallback(
+  const brushEndListener = useCallback<BrushEndListener>(
     ({ x }) => {
       if (!x) {
         return;
@@ -145,7 +144,7 @@ function TimelionVisComponent({
 
   const onRenderChange = useCallback(
     (isRendered: boolean) => {
-      if (!isRendered) {
+      if (isRendered) {
         renderComplete();
       }
     },
@@ -156,6 +155,11 @@ function TimelionVisComponent({
     seriesList.list,
   ]);
 
+  const tickFormat = useMemo(
+    () => createTickFormat(interval, kibana.services.timefilter, kibana.services.uiSettings),
+    [interval, kibana.services.timefilter, kibana.services.uiSettings]
+  );
+
   return (
     <div className="timelionChart">
       <div className="timelionChart__topTitle">{title}</div>
@@ -172,12 +176,7 @@ function TimelionVisComponent({
             type: TooltipType.VerticalCursor,
           }}
         />
-        <Axis
-          id="bottom"
-          position={Position.Bottom}
-          showOverlappingTicks
-          tickFormat={options.xaxis.tickFormatter}
-        />
+        <Axis id="bottom" position={Position.Bottom} showOverlappingTicks tickFormat={tickFormat} />
         {chart[0]._global?.yaxes ? (
           chart[0]._global.yaxes.map((axis: IAxis, index: number) => {
             return (
diff --git a/src/plugins/vis_type_timelion/public/helpers/panel_utils.ts b/src/plugins/vis_type_timelion/public/helpers/panel_utils.ts
index 748476e82a0811..7ddff9bd6f4116 100644
--- a/src/plugins/vis_type_timelion/public/helpers/panel_utils.ts
+++ b/src/plugins/vis_type_timelion/public/helpers/panel_utils.ts
@@ -50,18 +50,6 @@ export interface Axis {
   axisLabel: string;
 }
 
-export interface Options {
-  xaxis: {
-    tickFormatter: (val: number) => string;
-  };
-  crosshair: {
-    color: string;
-    lineWidth: number;
-  };
-  colors: string[];
-  yaxes: Axis[];
-}
-
 interface TimeRangeBounds {
   min: Moment | undefined;
   max: Moment | undefined;
@@ -80,11 +68,11 @@ const colors = [
   '#D70060',
 ];
 
-function buildOptions(
+function createTickFormat(
   intervalValue: string,
   timefilter: TimefilterContract,
   uiSettings: IUiSettingsClient
-): Options {
+) {
   // Get the X-axis tick format
   const time: TimeRangeBounds = timefilter.getBounds();
   const interval = calculateInterval(
@@ -96,20 +84,7 @@ function buildOptions(
   );
   const format = xaxisFormatterProvider(uiSettings)(interval);
 
-  const options = {
-    xaxis: {
-      // Use moment to format ticks so we get timezone correction
-      tickFormatter: (val: number) => moment(val).format(format),
-    },
-    crosshair: {
-      color: '#C66',
-      lineWidth: 2,
-    },
-    colors,
-    yaxes: [],
-  };
-
-  return options;
+  return (val: number) => moment(val).format(format);
 }
 
-export { buildOptions, colors };
+export { createTickFormat, colors };