diff --git a/.github/workflows/dart.yml b/.github/workflows/dart.yml
index b9b1e6f..cb1dfbc 100644
--- a/.github/workflows/dart.yml
+++ b/.github/workflows/dart.yml
@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: dart-lang/setup-dart@v1
       - name: Dart version
         run: |
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9f1f5cf..a85ff24 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,17 @@
+## 3.0.0-beta.1
+
+- Migrate `dart:html` (deprecated) to package `web`.
+
+- sdk: '>=3.6.0 <4.0.0'
+
+- swiss_knife: ^3.3.0
+- dom_tools: ^3.0.0-beta.6
+- amdjs: ^3.0.0-beta.2
+- web: ^1.1.0
+- web_utils: ^1.0.9
+- js_interop_utils: ^1.0.5
+- intl: ^0.20.2
+
 ## 2.1.1
 
 - sdk: '>=3.5.0 <4.0.0'
diff --git a/example/main.dart b/example/main.dart
index 88f7962..126ce41 100644
--- a/example/main.dart
+++ b/example/main.dart
@@ -1,11 +1,11 @@
-// ignore: deprecated_member_use
-import 'dart:html';
-
 import 'package:chart_engine/chart_engine_all.dart';
+import 'package:web_utils/web_utils.dart';
 
 void main() async {
-  querySelector('#apexcharts_version')!.text = ChartEngineApexCharts().version;
-  querySelector('#chartjs_version')!.text = ChartEngineChartJS().version;
+  document.querySelector('#apexcharts_version')!.text =
+      ChartEngineApexCharts().version;
+  document.querySelector('#chartjs_version')!.text =
+      ChartEngineChartJS().version;
 
   await createLineChart();
   await createTimeSeriesChart();
@@ -19,7 +19,7 @@ void main() async {
 
   await createFinancialChart();
 
-  querySelector('#chart-version')!.text = ChartEngine.VERSION;
+  document.querySelector('#chart-version')!.text = ChartEngine.VERSION;
 }
 
 Future createLineChart() async {
@@ -47,15 +47,19 @@ Future createLineChart() async {
   await charEngine2.load();
 
   charEngine1.renderLineChart(
-      querySelector('#apexcharts-line1-output')!, series);
-  charEngine2.renderLineChart(querySelector('#chartjs-line1-output')!, series);
+      document.querySelector('#apexcharts-line1-output') as HTMLElement,
+      series);
+  charEngine2.renderLineChart(
+      document.querySelector('#chartjs-line1-output') as HTMLElement, series);
 
   series.options.fillLines = true;
   series.options.verticalLines = [VerticalLine(1, label: 'Mark', yPosition: 1)];
 
   charEngine1.renderLineChart(
-      querySelector('#apexcharts-line2-output')!, series);
-  charEngine2.renderLineChart(querySelector('#chartjs-line2-output')!, series);
+      document.querySelector('#apexcharts-line2-output') as HTMLElement,
+      series);
+  charEngine2.renderLineChart(
+      document.querySelector('#chartjs-line2-output') as HTMLElement, series);
 }
 
 Future createTimeSeriesChart() async {
@@ -97,9 +101,11 @@ Future createTimeSeriesChart() async {
   await Future.wait([charEngine1.load(), charEngine2.load()]);
 
   charEngine1.renderTimeSeriesChart(
-      querySelector('#apexcharts-time_series-output')!, series);
+      document.querySelector('#apexcharts-time_series-output') as HTMLElement,
+      series);
   charEngine2.renderTimeSeriesChart(
-      querySelector('#chartjs-time_series-output')!, series);
+      document.querySelector('#chartjs-time_series-output') as HTMLElement,
+      series);
 }
 
 Future createBarChart() async {
@@ -125,14 +131,19 @@ Future createBarChart() async {
   await Future.wait([charEngine1.load(), charEngine2.load()]);
 
   series.title = 'Bar Chart Example';
-  charEngine1.renderBarChart(querySelector('#apexcharts-bar-output')!, series);
-  charEngine2.renderBarChart(querySelector('#chartjs-bar-output')!, series);
+  charEngine1.renderBarChart(
+      document.querySelector('#apexcharts-bar-output') as HTMLElement, series);
+  charEngine2.renderBarChart(
+      document.querySelector('#chartjs-bar-output') as HTMLElement, series);
 
   series.title = 'Horizontal Bar Chart Example';
   charEngine1.renderHorizontalBarChart(
-      querySelector('#apexcharts-horizontal-bar-output')!, series);
+      document.querySelector('#apexcharts-horizontal-bar-output')
+          as HTMLElement,
+      series);
   charEngine2.renderHorizontalBarChart(
-      querySelector('#chartjs-horizontal-bar-output')!, series);
+      document.querySelector('#chartjs-horizontal-bar-output') as HTMLElement,
+      series);
 }
 
 Future createScatterChart() async {
@@ -177,9 +188,11 @@ Future createScatterChart() async {
   await Future.wait([charEngine1.load(), charEngine2.load()]);
 
   charEngine1.renderScatterChart(
-      querySelector('#apexcharts-scatter-output')!, series2);
+      document.querySelector('#apexcharts-scatter-output') as HTMLElement,
+      series2);
   charEngine2.renderScatterChart(
-      querySelector('#chartjs-scatter-output')!, series2);
+      document.querySelector('#chartjs-scatter-output') as HTMLElement,
+      series2);
 }
 
 Future createScatterTimedChart() async {
@@ -221,9 +234,11 @@ Future createScatterTimedChart() async {
   await Future.wait([charEngine1.load(), charEngine2.load()]);
 
   charEngine1.renderScatterTimedChart(
-      querySelector('#apexcharts-scatter_timed-output')!, series);
+      document.querySelector('#apexcharts-scatter_timed-output') as HTMLElement,
+      series);
   charEngine2.renderScatterTimedChart(
-      querySelector('#chartjs-scatter_timed-output')!, series);
+      document.querySelector('#chartjs-scatter_timed-output') as HTMLElement,
+      series);
 }
 
 Future createGaugeChart() async {
@@ -243,8 +258,10 @@ Future createGaugeChart() async {
   // Simultaneous load engines:
   await Future.wait([charEngine1.load(), charEngine2.load()]);
 
-  charEngine1.renderGaugeChart(querySelector('#apexcharts-gauge-output')!, set);
-  charEngine2.renderGaugeChart(querySelector('#chartjs-gauge-output')!, set);
+  charEngine1.renderGaugeChart(
+      document.querySelector('#apexcharts-gauge-output') as HTMLElement, set);
+  charEngine2.renderGaugeChart(
+      document.querySelector('#chartjs-gauge-output') as HTMLElement, set);
 }
 
 Future createFinancialChart() async {
@@ -287,11 +304,13 @@ Future createFinancialChart() async {
 
   series.title = 'Financial Chart (OHLC) Example';
   charEngine2.renderFinancialChart(
-      querySelector('#chartjs-financial-ohlc-output')!, series,
+      document.querySelector('#chartjs-financial-ohlc-output') as HTMLElement,
+      series,
       ohlc: true);
 
   series.title = 'Financial Chart (Candlestick) Example';
   charEngine2.renderFinancialChart(
-      querySelector('#chartjs-financial-candle-output')!, series,
+      document.querySelector('#chartjs-financial-candle-output') as HTMLElement,
+      series,
       candlestick: true);
 }
diff --git a/lib/src/chart_engine_apexcharts.dart b/lib/src/chart_engine_apexcharts.dart
index bbf94f9..d45a2d1 100644
--- a/lib/src/chart_engine_apexcharts.dart
+++ b/lib/src/chart_engine_apexcharts.dart
@@ -1,11 +1,9 @@
-// ignore: deprecated_member_use
-import 'dart:html';
-// ignore: deprecated_member_use
-import 'dart:js';
+import 'dart:js_interop_unsafe';
 
 import 'package:amdjs/amdjs.dart';
 import 'package:color_palette_generator/color_palette_generator.dart';
 import 'package:swiss_knife/swiss_knife.dart';
+import 'package:web_utils/web_utils.dart';
 
 import 'chart_engine_base.dart';
 import 'chart_engine_series.dart';
@@ -43,7 +41,7 @@ class ChartEngineApexCharts extends ChartEngine {
   @override
   EventStream<LoadController> get onLoad => _loadController.onLoad;
 
-  static JsObject? _jsWrapper;
+  static JSObject? _jsWrapper;
 
   /// Loads ApexCharts (`apexcharts.amd.js`) and engine wrapper.
   @override
@@ -55,7 +53,7 @@ class ChartEngineApexCharts extends ChartEngine {
           jsFullPath: ENGINE_WRAPPER_PATH,
           globalJSVariableName: JS_WRAPPER_GLOBAL_NAME);
 
-      _jsWrapper = context[JS_WRAPPER_GLOBAL_NAME] as JsObject?;
+      _jsWrapper = globalContext[JS_WRAPPER_GLOBAL_NAME] as JSObject?;
 
       return okJS && okWrapper;
     });
@@ -67,26 +65,26 @@ class ChartEngineApexCharts extends ChartEngine {
 
   /// Ensures that DOM element to render is a div. If not will insert a div
   /// inside the element and use it.
-  DivElement asDivElement(Element element) {
-    if (element is DivElement) return element;
+  HTMLDivElement asDivElement(Element element) {
+    if (element.isA<HTMLDivElement>()) return element as HTMLDivElement;
 
-    var div = DivElement();
-    element.children.add(div);
+    var div = HTMLDivElement();
+    element.appendChild(div);
 
     return div;
   }
 
-  static JsObject? _xAxisMinMax(ChartData chartData) {
+  static JSObject? _xAxisMinMax(ChartData chartData) {
     var minMax = chartData.options.xAxisMinMax;
-    return minMax != null ? JsObject.jsify(minMax) : null;
+    return minMax?.toJSDeep;
   }
 
-  static JsObject? _yAxisMinMax(ChartData chartData) {
+  static JSObject? _yAxisMinMax(ChartData chartData) {
     var minMax = chartData.options.yAxisMinMax;
-    return minMax != null ? JsObject.jsify(minMax) : null;
+    return minMax?.toJSDeep;
   }
 
-  JsObject? _verticalLines(ChartData chartData) {
+  JSObject? _verticalLines(ChartData chartData) {
     var lines = chartData.options.verticalLines;
 
     if (isNotEmptyObject(lines)) {
@@ -123,14 +121,15 @@ class ChartEngineApexCharts extends ChartEngine {
         });
       }
 
-      return JsObject.jsify(verticalLinesConfig);
+      return verticalLinesConfig.toJSDeep;
     }
 
     return null;
   }
 
   @override
-  RenderedApexCharts renderLineChart(Element output, ChartSeries chartData) {
+  RenderedApexCharts renderLineChart(
+      HTMLElement output, ChartSeries chartData) {
     checkRenderParameters(output, chartData);
     checkLoaded();
 
@@ -151,17 +150,18 @@ class ChartEngineApexCharts extends ChartEngine {
       chartData.title,
       chartData.xTitle,
       chartData.yTitle,
-      JsObject.jsify(chartData.xLabels),
+      chartData.xLabels.toJSDeep,
       _xAxisMinMax(chartData),
       _yAxisMinMax(chartData),
-      JsObject.jsify(series),
+      series.toJSDeep,
       _verticalLines(chartData),
-      JsObject.jsify(colors),
+      colors.toJSDeep,
       chartData.options.fillLines,
       chartData.options.straightLines
     ];
 
-    var chartObject = _jsWrapper!.callMethod('renderLine', renderArgs);
+    var chartObject = _jsWrapper!.callMethodVarArgs<JSObject>(
+        'renderLine'.toJS, renderArgs.map((e) => e.toJSDeep).toList());
 
     return RenderedApexCharts(this, 'line', chartObject, chartData);
   }
@@ -171,7 +171,7 @@ class ChartEngineApexCharts extends ChartEngine {
 
   @override
   RenderedApexCharts renderTimeSeriesChart(
-      Element output, ChartTimeSeries chartData) {
+      HTMLElement output, ChartTimeSeries chartData) {
     checkRenderParameters(output, chartData);
     checkLoaded();
 
@@ -194,31 +194,32 @@ class ChartEngineApexCharts extends ChartEngine {
       chartData.yTitle,
       _xAxisMinMax(chartData),
       _yAxisMinMax(chartData),
-      JsObject.jsify(timeSeries),
+      timeSeries.toJSDeep,
       _verticalLines(chartData),
-      JsObject.jsify(colors),
+      colors.toJSDeep,
       chartData.options.fillLines,
       chartData.options.straightLines
     ];
 
-    var chartObject = _jsWrapper!.callMethod('renderTimeSeries', renderArgs);
+    var chartObject = _jsWrapper!.callMethodVarArgs<JSObject>(
+        'renderTimeSeries'.toJS, renderArgs.map((e) => e.toJSDeep).toList());
 
     return RenderedApexCharts(this, 'time-series', chartObject, chartData);
   }
 
   @override
-  RenderedApexCharts renderBarChart(Element output, ChartSeries chartData) {
+  RenderedApexCharts renderBarChart(HTMLElement output, ChartSeries chartData) {
     return _renderBarChartImpl(false, output, chartData);
   }
 
   @override
   RenderedApexCharts renderHorizontalBarChart(
-      Element output, ChartSeries chartData) {
+      HTMLElement output, ChartSeries chartData) {
     return _renderBarChartImpl(true, output, chartData);
   }
 
   RenderedApexCharts _renderBarChartImpl(
-      bool horizontal, Element output, ChartSeries chartSeries) {
+      bool horizontal, HTMLElement output, ChartSeries chartSeries) {
     checkRenderParameters(output, chartSeries);
     checkLoaded();
 
@@ -238,14 +239,15 @@ class ChartEngineApexCharts extends ChartEngine {
       chartSeries.title,
       chartSeries.xTitle,
       chartSeries.yTitle,
-      JsObject.jsify(chartSeries.xLabels),
+      chartSeries.xLabels.toJSDeep,
       _xAxisMinMax(chartSeries),
       _yAxisMinMax(chartSeries),
-      JsObject.jsify(set),
-      JsObject.jsify(colors),
+      set.toJSDeep,
+      colors.toJSDeep,
     ];
 
-    var chartObject = _jsWrapper!.callMethod('renderBar', renderArgs);
+    var chartObject = _jsWrapper!.callMethodVarArgs<JSObject>(
+        'renderBar'.toJS, renderArgs.map((e) => e.toJSDeep).toList());
 
     return RenderedApexCharts(
         this,
@@ -255,7 +257,7 @@ class ChartEngineApexCharts extends ChartEngine {
   }
 
   @override
-  RenderedApexCharts renderGaugeChart(Element output, ChartSet chartData) {
+  RenderedApexCharts renderGaugeChart(HTMLElement output, ChartSet chartData) {
     checkRenderParameters(output, chartData);
     checkLoaded();
 
@@ -273,21 +275,22 @@ class ChartEngineApexCharts extends ChartEngine {
       chartData.title,
       chartData.xTitle,
       chartData.yTitle,
-      JsObject.jsify(chartData.xLabels),
+      chartData.xLabels.toJSDeep,
       _xAxisMinMax(chartData),
       _yAxisMinMax(chartData),
-      JsObject.jsify(set),
-      JsObject.jsify(colors),
+      set.toJSDeep,
+      colors.toJSDeep,
     ];
 
-    var chartObject = _jsWrapper!.callMethod('renderGauge', renderArgs);
+    var chartObject = _jsWrapper!.callMethodVarArgs<JSObject>(
+        'renderGauge'.toJS, renderArgs.map((e) => e.toJSDeep).toList());
 
     return RenderedApexCharts(this, 'gauge', chartObject, chartData);
   }
 
   @override
   RenderedApexCharts renderScatterChart(
-      Element output, ChartSeriesPair chartSeries) {
+      HTMLElement output, ChartSeriesPair chartSeries) {
     checkRenderParameters(output, chartSeries);
     checkLoaded();
 
@@ -305,28 +308,29 @@ class ChartEngineApexCharts extends ChartEngine {
     var yMin = yAxisScale.minimumNice;
     var yMax = yAxisScale.maximumNice;
 
-    var renderArgs = [
+    var renderArgs = <Object?>[
       div,
       chartSeries.title,
       chartSeries.xTitle,
       chartSeries.yTitle,
       _xAxisMinMax(chartSeries),
       _yAxisMinMax(chartSeries),
-      JsObject.jsify(seriesPairs),
+      seriesPairs.toJSDeep,
       _verticalLines(chartSeries),
-      JsObject.jsify(colors),
+      colors.toJSDeep,
       yMin,
       yMax
     ];
 
-    var chartObject = _jsWrapper!.callMethod('renderScatter', renderArgs);
+    var chartObject = _jsWrapper!.callMethodVarArgs<JSObject>(
+        'renderScatter'.toJS, renderArgs.map((e) => e.toJSDeep).toList());
 
     return RenderedApexCharts(this, 'scatter', chartObject, chartSeries);
   }
 
   @override
   RenderedApexCharts renderScatterTimedChart(
-      Element output, ChartTimeSeries chartSeries) {
+      HTMLElement output, ChartTimeSeries chartSeries) {
     checkRenderParameters(output, chartSeries);
     checkLoaded();
 
@@ -345,22 +349,23 @@ class ChartEngineApexCharts extends ChartEngine {
     var yMin = yAxisScale.minimumNice;
     var yMax = yAxisScale.maximumNice;
 
-    var renderArgs = [
+    var renderArgs = <Object?>[
       div,
       chartSeries.title,
       chartSeries.xTitle,
       chartSeries.yTitle,
       _xAxisMinMax(chartSeries),
       _yAxisMinMax(chartSeries),
-      JsObject.jsify(timeSeries),
+      timeSeries.toJSDeep,
       _verticalLines(chartSeries),
-      JsObject.jsify(colors),
+      colors.toJSDeep,
       yMin,
       yMax,
       true
     ];
 
-    var chartObject = _jsWrapper!.callMethod('renderScatter', renderArgs);
+    var chartObject = _jsWrapper!.callMethodVarArgs<JSObject>(
+        'renderScatter'.toJS, renderArgs.map((e) => e.toJSDeep).toList());
 
     return RenderedApexCharts(
         this, 'scatter-time-series', chartObject, chartSeries);
@@ -368,7 +373,7 @@ class ChartEngineApexCharts extends ChartEngine {
 
   @override
   RenderedApexCharts renderFinancialChart(
-      Element output, ChartTimeSeries chartSeries,
+      HTMLElement output, ChartTimeSeries chartSeries,
       {bool? ohlc, bool? candlestick}) {
     throw UnsupportedError('Not supported: FinancialChart!');
   }
@@ -380,7 +385,7 @@ class RenderedApexCharts extends RenderedChart {
 
   @override
   void refresh() {
-    if (!hasChartJsObject) return;
-    chartJsObject!.callMethod('render');
+    if (!hasChartJSObject) return;
+    chartJSObject!.callMethod<JSAny?>('render'.toJS);
   }
 }
diff --git a/lib/src/chart_engine_base.dart b/lib/src/chart_engine_base.dart
index acf7812..8b269ff 100644
--- a/lib/src/chart_engine_base.dart
+++ b/lib/src/chart_engine_base.dart
@@ -1,10 +1,6 @@
-// ignore: deprecated_member_use
-import 'dart:html';
-// ignore: deprecated_member_use
-import 'dart:js';
-
 import 'package:color_palette_generator/color_palette_generator.dart';
 import 'package:swiss_knife/swiss_knife.dart';
+import 'package:web_utils/web_utils.dart';
 
 import 'chart_engine_series.dart';
 
@@ -37,10 +33,10 @@ abstract class ChartEngine {
     }
   }
 
-  void checkRenderParameters(Element output, ChartData chartData) {}
+  void checkRenderParameters(HTMLElement output, ChartData chartData) {}
 
   /// Renders at [output] a [chartData], selecting the correct render method.
-  RenderedChart? render(Element output, ChartData chartData) {
+  RenderedChart? render(HTMLElement output, ChartData chartData) {
     _checkOutput(output);
 
     checkLoaded();
@@ -58,8 +54,8 @@ abstract class ChartEngine {
     return null;
   }
 
-  void _checkOutput(Element output) {
-    var parent = output.parent;
+  void _checkOutput(HTMLElement output) {
+    var parent = output.parentElement;
 
     if (parent == null) {
       print('WARNING: Chart output has no parent: $output');
@@ -72,34 +68,36 @@ abstract class ChartEngine {
   G getColorGeneratorAs<G extends ColorGenerator>() => colorGenerator as G;
 
   /// Renders a Line Chart:
-  RenderedChart renderLineChart(Element output, ChartSeries chartData);
+  RenderedChart renderLineChart(HTMLElement output, ChartSeries chartData);
 
   /// Renders a Time Series using Line Chart:
   RenderedChart renderTimeSeriesChart(
-      Element output, ChartTimeSeries chartData);
+      HTMLElement output, ChartTimeSeries chartData);
 
   /// Renders a Bar Chart:
-  RenderedChart renderBarChart(Element output, ChartSeries chartData);
+  RenderedChart renderBarChart(HTMLElement output, ChartSeries chartData);
 
   /// Renders a Horizontal Bar Chart:
-  RenderedChart renderHorizontalBarChart(Element output, ChartSeries chartData);
+  RenderedChart renderHorizontalBarChart(
+      HTMLElement output, ChartSeries chartData);
 
   /// Renders a Horizontal Bar Chart:
-  RenderedChart renderGaugeChart(Element output, ChartSet chartData);
+  RenderedChart renderGaugeChart(HTMLElement output, ChartSet chartData);
 
   /// Renders a Scatter Chart with X,Y pairs:
-  RenderedChart renderScatterChart(Element output, ChartSeriesPair chartSeries);
+  RenderedChart renderScatterChart(
+      HTMLElement output, ChartSeriesPair chartSeries);
 
   /// Renders a Scatter Chart Timed with DateTime values in X axis:
   RenderedChart renderScatterTimedChart(
-      Element output, ChartTimeSeries chartSeries);
+      HTMLElement output, ChartTimeSeries chartSeries);
 
   /// Renders financial chart.
   ///
   /// [ohlc] Renders a OHLC chart (default).
   /// [candlestick] Renders a Candlestick chart.
   RenderedChart renderFinancialChart(
-      Element output, ChartTimeSeries chartSeries,
+      HTMLElement output, ChartTimeSeries chartSeries,
       {bool? ohlc, bool? candlestick});
 
   Future _ensureLoaded() async {
@@ -110,56 +108,56 @@ abstract class ChartEngine {
 
   /// Same as [render], but [async].
   Future<RenderedChart?> renderAsync(
-      Element output, ChartData chartData) async {
+      HTMLElement output, ChartData chartData) async {
     await _ensureLoaded();
     return render(output, chartData);
   }
 
   /// Same as [renderLineChart], but [async].
   Future<RenderedChart> renderLineChartAsync(
-      Element output, ChartSeries chartData) async {
+      HTMLElement output, ChartSeries chartData) async {
     await _ensureLoaded();
     return renderLineChart(output, chartData);
   }
 
   /// Same as [renderTimeSeriesChart], but [async].
   Future<RenderedChart> renderTimeSeriesChartAsync(
-      Element output, ChartTimeSeries chartData) async {
+      HTMLElement output, ChartTimeSeries chartData) async {
     await _ensureLoaded();
     return renderTimeSeriesChart(output, chartData);
   }
 
   /// Same as [renderBarChart], but [async].
   Future<RenderedChart> renderBarChartAsync(
-      Element output, ChartSeries chartData) async {
+      HTMLElement output, ChartSeries chartData) async {
     await _ensureLoaded();
     return renderBarChart(output, chartData);
   }
 
   /// Same as [renderHorizontalBarChart], but [async].
   Future<RenderedChart> renderHorizontalBarChartAsync(
-      Element output, ChartSeries chartData) async {
+      HTMLElement output, ChartSeries chartData) async {
     await _ensureLoaded();
     return renderHorizontalBarChart(output, chartData);
   }
 
   /// Same as [renderGaugeChart], but [async].
   Future<RenderedChart> renderGaugeChartAsync(
-      Element output, ChartSet chartData) async {
+      HTMLElement output, ChartSet chartData) async {
     await _ensureLoaded();
     return renderGaugeChart(output, chartData);
   }
 
   /// Same as [renderScatterChart], but [async].
   Future<RenderedChart> renderScatterChartAsync(
-      Element output, ChartSeriesPair chartSeries) async {
+      HTMLElement output, ChartSeriesPair chartSeries) async {
     await _ensureLoaded();
     return renderScatterChart(output, chartSeries);
   }
 
   /// Same as [renderScatterTimedChart], but [async].
   Future<RenderedChart> renderScatterTimedChartAsync(
-      Element output, ChartTimeSeries chartSeries) async {
+      HTMLElement output, ChartTimeSeries chartSeries) async {
     await _ensureLoaded();
     return renderScatterTimedChart(output, chartSeries);
   }
@@ -239,7 +237,7 @@ class ChartEngineSwitchable extends ChartEngine {
 
   /// Renders using engine of [engineType].
   RenderedChart? renderWithEngineType(
-      Type engineType, Element output, ChartData chartData) {
+      Type engineType, HTMLElement output, ChartData chartData) {
     var prevMainEngine = _mainEngine;
     setMainEngineByType(engineType);
     var ok = render(output, chartData);
@@ -248,7 +246,8 @@ class ChartEngineSwitchable extends ChartEngine {
   }
 
   /// Renders using engine of type [T].
-  RenderedChart? renderOfEngineType<T>(Element output, ChartData chartData) {
+  RenderedChart? renderOfEngineType<T>(
+      HTMLElement output, ChartData chartData) {
     var prevMainEngine = _mainEngine;
     setMainEngineOfType<T>();
     var ok = render(output, chartData);
@@ -257,47 +256,48 @@ class ChartEngineSwitchable extends ChartEngine {
   }
 
   @override
-  RenderedChart renderLineChart(Element output, ChartSeries chartData) {
+  RenderedChart renderLineChart(HTMLElement output, ChartSeries chartData) {
     return mainEngine!.renderLineChart(output, chartData);
   }
 
   @override
-  RenderedChart renderTimeSeriesChart(Element output, ChartSeries chartData) {
+  RenderedChart renderTimeSeriesChart(
+      HTMLElement output, ChartSeries chartData) {
     return mainEngine!.renderTimeSeriesChart(
         output, chartData as ChartTimeSeries<dynamic, dynamic>);
   }
 
   @override
-  RenderedChart renderBarChart(Element output, ChartSeries chartData) {
+  RenderedChart renderBarChart(HTMLElement output, ChartSeries chartData) {
     return mainEngine!.renderBarChart(output, chartData);
   }
 
   @override
   RenderedChart renderHorizontalBarChart(
-      Element output, ChartSeries chartData) {
+      HTMLElement output, ChartSeries chartData) {
     return mainEngine!.renderHorizontalBarChart(output, chartData);
   }
 
   @override
-  RenderedChart renderGaugeChart(Element output, ChartSet chartData) {
+  RenderedChart renderGaugeChart(HTMLElement output, ChartSet chartData) {
     return mainEngine!.renderGaugeChart(output, chartData);
   }
 
   @override
   RenderedChart renderScatterChart(
-      Element output, ChartSeriesPair chartSeries) {
+      HTMLElement output, ChartSeriesPair chartSeries) {
     return mainEngine!.renderScatterChart(output, chartSeries);
   }
 
   @override
   RenderedChart renderScatterTimedChart(
-      Element output, ChartTimeSeries chartSeries) {
+      HTMLElement output, ChartTimeSeries chartSeries) {
     return mainEngine!.renderScatterTimedChart(output, chartSeries);
   }
 
   @override
   RenderedChart renderFinancialChart(
-      Element output, ChartTimeSeries chartSeries,
+      HTMLElement output, ChartTimeSeries chartSeries,
       {bool? ohlc, bool? candlestick}) {
     return mainEngine!.renderFinancialChart(output, chartSeries,
         ohlc: ohlc, candlestick: candlestick);
@@ -323,9 +323,9 @@ abstract class RenderedChart {
     }
   }
 
-  JsObject? get chartJsObject => chartObject is JsObject ? chartObject : null;
+  JSObject? get chartJSObject => chartObject.isJSObject ? chartObject : null;
 
-  bool get hasChartJsObject => chartJsObject != null;
+  bool get hasChartJSObject => chartJSObject != null;
 
   @override
   String toString() {
diff --git a/lib/src/chart_engine_chartjs.dart b/lib/src/chart_engine_chartjs.dart
index 5bda684..bc4ec2e 100644
--- a/lib/src/chart_engine_chartjs.dart
+++ b/lib/src/chart_engine_chartjs.dart
@@ -1,11 +1,9 @@
-// ignore: deprecated_member_use
-import 'dart:html';
-// ignore: deprecated_member_use
-import 'dart:js';
+import 'dart:js_interop_unsafe';
 
 import 'package:amdjs/amdjs.dart';
 import 'package:dom_tools/dom_tools.dart';
 import 'package:swiss_knife/swiss_knife.dart';
+import 'package:web_utils/web_utils.dart';
 
 import 'chart_engine_base.dart';
 import 'chart_engine_date.dart';
@@ -58,7 +56,7 @@ class ChartEngineChartJS extends ChartEngine {
   @override
   EventStream<LoadController> get onLoad => _loadController.onLoad;
 
-  static JsObject? _jsWrapper;
+  static JSObject? _jsWrapper;
 
   /// Loads ChartJS (`chart.js`) and engine wrapper.
   @override
@@ -71,7 +69,7 @@ class ChartEngineChartJS extends ChartEngine {
           jsFullPath: ENGINE_WRAPPER_PATH,
           globalJSVariableName: JS_WRAPPER_GLOBAL_NAME);
 
-      _jsWrapper = context[JS_WRAPPER_GLOBAL_NAME] as JsObject?;
+      _jsWrapper = globalContext[JS_WRAPPER_GLOBAL_NAME] as JSObject?;
 
       _allowInterop();
 
@@ -84,15 +82,20 @@ class ChartEngineChartJS extends ChartEngine {
       throw StateError("Can't allowInterop _DateAdapter: null _jsWrapper");
     }
 
-    _jsWrapper!['_DateAdapter__parse'] = ([a, b]) => DateAdapter.parse(a, b);
-    _jsWrapper!['_DateAdapter__format'] = ([a, b]) => DateAdapter.format(a, b);
-    _jsWrapper!['_DateAdapter__startOf'] =
-        ([a, b, c]) => DateAdapter.startOf(a, b, c);
-    _jsWrapper!['_DateAdapter__endOf'] = ([a, b]) => DateAdapter.endOf(a, b);
-    _jsWrapper!['_DateAdapter__add'] = ([a, b, c]) => DateAdapter.add(a, b, c);
-    _jsWrapper!['_DateAdapter__diff'] =
-        ([a, b, c]) => DateAdapter.diff(a, b, c);
-    _jsWrapper!['_DateAdapter__create'] = ([a]) => DateAdapter.create(a);
+    _jsWrapper!['_DateAdapter__parse'] = (([JSAny? a, JSAny? b]) =>
+        DateAdapter.parse(a.dartify(), b.dartify())).toJS;
+    _jsWrapper!['_DateAdapter__format'] = (([JSAny? a, JSAny? b]) =>
+        DateAdapter.format(a.dartify(), b.dartify())).toJS;
+    _jsWrapper!['_DateAdapter__startOf'] = (([JSAny? a, JSAny? b, JSAny? c]) =>
+        DateAdapter.startOf(a.dartify(), b.dartify(), c.dartify())).toJS;
+    _jsWrapper!['_DateAdapter__endOf'] = (([JSAny? a, JSAny? b]) =>
+        DateAdapter.endOf(a.dartify(), b.dartify())).toJS;
+    _jsWrapper!['_DateAdapter__add'] = (([JSAny? a, JSAny? b, JSAny? c]) =>
+        DateAdapter.add(a.dartify(), b.dartify(), c.dartify())).toJS;
+    _jsWrapper!['_DateAdapter__diff'] = (([JSAny? a, JSAny? b, JSAny? c]) =>
+        DateAdapter.diff(a.dartify(), b.dartify(), c.dartify())).toJS;
+    _jsWrapper!['_DateAdapter__create'] =
+        (([JSAny? a]) => DateAdapter.create(a.dartify())).toJS;
   }
 
   static final LoadController _loadControllerFinancial =
@@ -132,40 +135,44 @@ class ChartEngineChartJS extends ChartEngine {
 
   /// Ensures that DOM element to render is a canvas. If not will insert a canvas
   /// inside the element and use it.
-  CanvasElement asCanvasElement(Element element) {
-    if (element is CanvasElement) return element;
+  HTMLCanvasElement asCanvasElement(HTMLElement element) {
+    if (element.isA<HTMLCanvasElement>()) return element as HTMLCanvasElement;
 
-    var w = getElementWidth(element, 640);
-    var h = getElementHeight(element, 480);
+    var w = getElementWidth(element, 640) ?? 640;
+    var h = getElementHeight(element, 480) ?? 480;
 
-    var canvas = CanvasElement(width: w, height: h);
-    element.children.add(canvas);
+    var canvas = HTMLCanvasElement()
+      ..width = w
+      ..height = h;
+
+    element.appendChild(canvas);
 
     return canvas;
   }
 
-  static JsObject? _xAxisMinMax(ChartData chartData) {
+  static JSArray? _xAxisMinMax(ChartData chartData) {
     var minMax = chartData.options.xAxisMinMax;
-    return minMax != null ? JsObject.jsify(minMax) : null;
+    return minMax?.toJS;
   }
 
-  static JsObject? _yAxisMinMax(ChartData chartData) {
+  static JSArray? _yAxisMinMax(ChartData chartData) {
     var minMax = chartData.options.yAxisMinMax;
-    return minMax != null ? JsObject.jsify(minMax) : null;
+    return minMax?.toJS;
   }
 
   static Function? _onClick(ChartData chartData) {
     var onClick = chartData.options.onClick;
     if (onClick == null) return null;
-    return (activeItems, xItems, yItems) {
+    return (Object? activeItems, Object? xItems, Object? yItems) {
       onClick(
-          jsToDart(activeItems) as List<dynamic>?,
-          jsToDart(xItems) as List<dynamic>?,
-          jsToDart(yItems) as List<dynamic>?);
+        activeItems.objectDartify() as List?,
+        xItems.objectDartify() as List?,
+        yItems.objectDartify() as List?,
+      );
     };
   }
 
-  static JsObject? _verticalLinesConfig(ChartData chartData) {
+  static JSObject? _verticalLinesConfig(ChartData chartData) {
     var lines = chartData.options.verticalLines;
 
     if (isNotEmptyObject(lines)) {
@@ -189,14 +196,14 @@ class ChartEngineChartJS extends ChartEngine {
         };
       }
 
-      return JsObject.jsify(verticalLinesConfig);
+      return verticalLinesConfig.toJSDeep;
     }
 
     return null;
   }
 
   @override
-  RenderedChartJS renderLineChart(Element output, ChartSeries chartData) {
+  RenderedChartJS renderLineChart(HTMLElement output, ChartSeries chartData) {
     checkRenderParameters(output, chartData);
     checkLoaded();
 
@@ -215,26 +222,27 @@ class ChartEngineChartJS extends ChartEngine {
       chartData.title,
       chartData.xTitle,
       chartData.yTitle,
-      JsObject.jsify(chartData.xLabels),
+      chartData.xLabels.toJSDeep,
       _xAxisMinMax(chartData),
       _yAxisMinMax(chartData),
-      JsObject.jsify(series),
+      series.toJSDeep,
       _verticalLinesConfig(chartData),
-      JsObject.jsify(colors),
+      colors.toJSDeep,
       chartData.options.fillLines,
       chartData.options.straightLines,
       chartData.options.steppedLines,
       _onClick(chartData)
     ];
 
-    var chartObject = _jsWrapper!.callMethod('renderLine', renderArgs);
+    var chartObject = _jsWrapper!.callMethodVarArgs<JSObject>(
+        'renderLine'.toJS, renderArgs.map((e) => e.toJSDeep).toList());
 
     return RenderedChartJS(this, 'line', chartObject, chartData);
   }
 
   @override
   RenderedChartJS renderTimeSeriesChart(
-      Element output, ChartTimeSeries chartData) {
+      HTMLElement output, ChartTimeSeries chartData) {
     checkRenderParameters(output, chartData);
     checkLoaded();
 
@@ -255,33 +263,34 @@ class ChartEngineChartJS extends ChartEngine {
       chartData.yTitle,
       _xAxisMinMax(chartData),
       _yAxisMinMax(chartData),
-      JsObject.jsify(timeSeries),
+      timeSeries.toJSDeep,
       _verticalLinesConfig(chartData),
-      JsObject.jsify(colors),
+      colors.toJSDeep,
       chartData.options.fillLines,
       chartData.options.straightLines,
       chartData.options.steppedLines,
       _onClick(chartData)
     ];
 
-    var chartObject = _jsWrapper!.callMethod('renderTimeSeries', renderArgs);
+    var chartObject = _jsWrapper!.callMethodVarArgs<JSObject>(
+        'renderTimeSeries'.toJS, renderArgs.map((e) => e.toJSDeep).toList());
 
     return RenderedChartJS(this, 'time-series', chartObject, chartData);
   }
 
   @override
-  RenderedChartJS renderBarChart(Element output, ChartSeries chartData) {
+  RenderedChartJS renderBarChart(HTMLElement output, ChartSeries chartData) {
     return _renderBarChartImpl(false, output, chartData);
   }
 
   @override
   RenderedChartJS renderHorizontalBarChart(
-      Element output, ChartSeries chartData) {
+      HTMLElement output, ChartSeries chartData) {
     return _renderBarChartImpl(true, output, chartData);
   }
 
   RenderedChartJS _renderBarChartImpl(
-      bool horizontal, Element output, ChartSeries chartSeries) {
+      bool horizontal, HTMLElement output, ChartSeries chartSeries) {
     checkRenderParameters(output, chartSeries);
     checkLoaded();
 
@@ -301,15 +310,16 @@ class ChartEngineChartJS extends ChartEngine {
       chartSeries.title,
       chartSeries.xTitle,
       chartSeries.yTitle,
-      JsObject.jsify(chartSeries.xLabels),
+      chartSeries.xLabels.toJSDeep,
       _xAxisMinMax(chartSeries),
       _yAxisMinMax(chartSeries),
-      JsObject.jsify(series),
-      JsObject.jsify(colors),
+      series.toJSDeep,
+      colors.toJSDeep,
       _onClick(chartSeries)
     ];
 
-    var chartObject = _jsWrapper!.callMethod('renderBar', renderArgs);
+    var chartObject = _jsWrapper!.callMethodVarArgs<JSObject>(
+        'renderBar'.toJS, renderArgs.map((e) => e.toJSDeep).toList());
 
     return RenderedChartJS(
         this,
@@ -319,7 +329,7 @@ class ChartEngineChartJS extends ChartEngine {
   }
 
   @override
-  RenderedChartJS renderGaugeChart(Element output, ChartSet chartData) {
+  RenderedChartJS renderGaugeChart(HTMLElement output, ChartSet chartData) {
     checkRenderParameters(output, chartData);
     checkLoaded();
 
@@ -338,21 +348,22 @@ class ChartEngineChartJS extends ChartEngine {
       chartData.title,
       chartData.xTitle,
       chartData.yTitle,
-      JsObject.jsify(chartData.xLabels),
-      JsObject.jsify(set),
-      JsObject.jsify(colors),
-      JsObject.jsify(disabledColors),
+      chartData.xLabels.toJSDeep,
+      set.toJSDeep,
+      colors.toJSDeep,
+      disabledColors.toJSDeep,
       _onClick(chartData)
     ];
 
-    var chartObject = _jsWrapper!.callMethod('renderGauge', renderArgs);
+    var chartObject = _jsWrapper!.callMethodVarArgs<JSObject>(
+        'renderGauge'.toJS, renderArgs.map((e) => e.toJSDeep).toList());
 
     return RenderedChartJS(this, 'gauge', chartObject, chartData);
   }
 
   @override
   RenderedChartJS renderScatterChart(
-      Element output, ChartSeriesPair chartSeries) {
+      HTMLElement output, ChartSeriesPair chartSeries) {
     checkRenderParameters(output, chartSeries);
     checkLoaded();
 
@@ -372,20 +383,21 @@ class ChartEngineChartJS extends ChartEngine {
       chartSeries.yTitle,
       _xAxisMinMax(chartSeries),
       _yAxisMinMax(chartSeries),
-      JsObject.jsify(seriesPairs),
+      seriesPairs.toJSDeep,
       _verticalLinesConfig(chartSeries),
-      JsObject.jsify(colors),
+      colors.toJSDeep,
       _onClick(chartSeries)
     ];
 
-    var chartObject = _jsWrapper!.callMethod('renderScatter', renderArgs);
+    var chartObject = _jsWrapper!.callMethodVarArgs<JSObject>(
+        'renderScatter'.toJS, renderArgs.map((e) => e.toJSDeep).toList());
 
     return RenderedChartJS(this, 'scatter', chartObject, chartSeries);
   }
 
   @override
   RenderedChartJS renderScatterTimedChart(
-      Element output, ChartTimeSeries chartSeries) {
+      HTMLElement output, ChartTimeSeries chartSeries) {
     checkRenderParameters(output, chartSeries);
     checkLoaded();
 
@@ -406,14 +418,15 @@ class ChartEngineChartJS extends ChartEngine {
       chartSeries.yTitle,
       _xAxisMinMax(chartSeries),
       _yAxisMinMax(chartSeries),
-      JsObject.jsify(seriesPairs),
+      seriesPairs.toJSDeep,
       _verticalLinesConfig(chartSeries),
-      JsObject.jsify(colors),
+      colors.toJSDeep,
       true,
       _onClick(chartSeries)
     ];
 
-    var chartObject = _jsWrapper!.callMethod('renderScatter', renderArgs);
+    var chartObject = _jsWrapper!.callMethodVarArgs<JSObject>(
+        'renderScatter'.toJS, renderArgs.map((e) => e.toJSDeep).toList());
 
     return RenderedChartJS(
         this, 'scatter-time-series', chartObject, chartSeries);
@@ -425,7 +438,7 @@ class ChartEngineChartJS extends ChartEngine {
   /// [candlestick] Renders a Candlestick chart.
   @override
   RenderedChartJS renderFinancialChart(
-      Element output, ChartTimeSeries chartSeries,
+      HTMLElement output, ChartTimeSeries chartSeries,
       {bool? ohlc, bool? candlestick}) {
     checkRenderParameters(output, chartSeries);
     checkLoadedFinancial();
@@ -458,17 +471,18 @@ class ChartEngineChartJS extends ChartEngine {
       chartSeries.yTitle,
       _xAxisMinMax(chartSeries),
       _yAxisMinMax(chartSeries),
-      JsObject.jsify(seriesPairs),
+      seriesPairs.toJSDeep,
       _verticalLinesConfig(chartSeries),
-      JsObject.jsify(colors),
-      JsObject.jsify(colorsUp),
-      JsObject.jsify(colorsDown),
-      JsObject.jsify(colorsUnchanged),
+      colors.toJSDeep,
+      colorsUp.toJSDeep,
+      colorsDown.toJSDeep,
+      colorsUnchanged.toJSDeep,
       ohlc,
       _onClick(chartSeries)
     ];
 
-    var chartObject = _jsWrapper!.callMethod('renderFinancial', renderArgs);
+    var chartObject = _jsWrapper!.callMethodVarArgs<JSObject>(
+        'renderFinancial'.toJS, renderArgs.map((e) => e.toJSDeep).toList());
 
     return RenderedChartJS(this, 'financial-${ohlc ? 'ohlc' : 'candlestick'}',
         chartObject, chartSeries);
@@ -480,16 +494,22 @@ class RenderedChartJS extends RenderedChart {
 
   @override
   void refresh() {
-    if (!hasChartJsObject) return;
-    chartJsObject!.callMethod('update');
+    if (!hasChartJSObject) return;
+    chartJSObject!.callMethod<JSAny?>('update'.toJS);
   }
 
   void addDateValue(dynamic date, dynamic value) {
     var dateTime = parseDateTime(date)!;
 
-    var args = [chartObject, dateTime.millisecondsSinceEpoch, 0, value];
+    var args = <Object?>[
+      chartObject,
+      dateTime.millisecondsSinceEpoch,
+      0,
+      value
+    ];
 
-    ChartEngineChartJS._jsWrapper!.callMethod('addData_date_value', args);
+    ChartEngineChartJS._jsWrapper!.callMethodVarArgs<JSAny?>(
+        'addData_date_value'.toJS, args.map((e) => e.toJSDeep).toList());
   }
 
   void addOHLC(dynamic series, dynamic time, double open, double high,
@@ -499,21 +519,22 @@ class RenderedChartJS extends RenderedChart {
 
     preserveTimeOfOverwrittenValue ??= false;
 
-    var args = [
+    var args = <Object?>[
       chartObject,
       series,
-      JsObject.jsify({
+      {
         't': dateTime.millisecondsSinceEpoch,
         'o': open,
         'h': high,
         'l': lower,
         'c': close
-      }),
+      }.toJSDeep,
       timeTolerance,
       preserveTimeOfOverwrittenValue
     ];
 
-    ChartEngineChartJS._jsWrapper!.callMethod('addData_tohlc', args);
+    ChartEngineChartJS._jsWrapper!.callMethodVarArgs<JSAny?>(
+        'addData_tohlc'.toJS, args.map((e) => e.toJSDeep).toList());
   }
 
   void addData(dynamic xVal, dynamic yVal) {}
diff --git a/pubspec.yaml b/pubspec.yaml
index 13d705e..8e48fcd 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -1,17 +1,18 @@
 name: chart_engine
 description: Chart generator with interchangeable chart engines, like ChartJS and ApexCharts.
-version: 2.1.1
+version: 3.0.0-beta.1
 homepage: https://github.com/Colossus-Services/chart_engine
 
 environment:
-  sdk: '>=3.5.0 <4.0.0'
+  sdk: '>=3.6.0 <4.0.0'
 
 dependencies:
-  swiss_knife: ^3.2.3
-  dom_tools: ^2.3.2
+  swiss_knife: ^3.3.0
+  dom_tools: ^3.0.0-beta.6
   color_palette_generator: ^2.0.1
-  amdjs: ^2.0.4
-  intl: ^0.19.0
+  amdjs: ^3.0.0-beta.2
+  intl: ^0.20.2
+  web_utils: ^1.0.9
 
 dev_dependencies:
   lints: ^5.1.1
diff --git a/test/chart_engine_browser_test.dart b/test/chart_engine_browser_test.dart
index 2ef6eef..5df01d0 100644
--- a/test/chart_engine_browser_test.dart
+++ b/test/chart_engine_browser_test.dart
@@ -1,11 +1,9 @@
 @TestOn('browser')
 library;
 
-// ignore: deprecated_member_use
-import 'dart:html';
-
 import 'package:chart_engine/chart_engine_all.dart';
 import 'package:test/test.dart';
+import 'package:web_utils/web_utils.dart';
 
 Future<void> _sleep(int sleepMs) async {
   if (sleepMs <= 0) return;
@@ -24,15 +22,16 @@ void _createLineChart(ChartEngine charEngine) async {
     'C': [100, 130, 140]
   });
 
-  var output = document.body!.append(DivElement()..style.width = '100%');
+  var output =
+      document.body!.appendChild(HTMLDivElement()..style.width = '100%');
 
-  expect(output.nodes.isEmpty, isTrue);
+  expect(output.childNodes.isEmpty, isTrue);
 
-  charEngine.renderLineChart(output as Element, series);
+  charEngine.renderLineChart(output as HTMLElement, series);
 
   await _sleep(500);
 
-  expect(output.nodes.isEmpty, isFalse);
+  expect(output.childNodes.isEmpty, isFalse);
 }
 
 void main() {