Replace domOutput with a renderChart function

We would like to use pygal with pyodide inside a web worker but we are
unable to access the DOM in a web worker. Therefore, we need to pass the
chart JavaScript object back (using postMessage) and render it in the
web page. This interface change makes that possible.

README.md

@@ -73,14 +73,14 @@ You can now use Pygal as a plain JavaScript file if you want to call it from
 JavaScript directly, or if you are using another Python interpreter such as
 [Pyodide](https://pyodide.org/en/stable/).
 
-The API should be identical except there is no longer an `Sk` global and you
-will need to set the `domOutput` function and `availableWidth` and `availableHeight`
+The API is similar except there is no longer an `Sk` global. Instead, you will
+need to set a `renderChart` function and `availableWidth` and `availableHeight`
 values on the `pygal.config` object:
 
 ```javascript
 import * as pygal from "./pygal.js"
 
-pygal.config.domOutput = (html) => { ... }
+pygal.config.renderChart = (chart) => Highcharts.chart(myElement, chart);
 pygal.config.availableWidth = 600;
 pygal.config.availableHeight = 400;
 ```

demo-pyodide.html

@@ -45,10 +45,7 @@ <h3>Try This</h3>
     <script type="module">
       import * as pygal from "./pygal.js";
 
-      pygal.config.domOutput = (html) => {
-        visual.innerHTML = html;
-        return visual.firstChild;
-      };
+      pygal.config.renderChart = (chart) => Highcharts.chart(visual, chart);
 
       const runButton = document.getElementById("run");
       const input = document.getElementById("input");

pygal.js

@@ -1,5 +1,5 @@
 export const config = {
-  domOutput: () => { throw new Error("The config.domOutput function has not been set for pygal."); },
+  renderChart: (chart) => { throw new Error("The config.renderChart function has not been set for pygal."); }
 };
 
 const COLORS = [
@@ -52,7 +52,6 @@ class Chart {
 
   render() {
     const options = this._options;
-    const elem = config.domOutput('<div></div>');
     const title_style = {
       color: '#FFFFFF'
     };
@@ -143,7 +142,7 @@ class Chart {
       chart = this.renderer(options, chart);
     }
 
-    Highcharts.chart(elem, chart);
+    config.renderChart(chart);
 
     return '';
   }