g2 comes with another custom HTML element. This element aims to allow the rendering of charts without the necessity of scripts and to minimize the implementation overhead for the user. while maintaining the flexibility g2 provides.

To implement the g2 element into your page just import the g2.chart.element.js.

The <g2-chart> follows the same syntax as the regular g2.chart element, but some things have to be considered. For the g2.chart element refer to its documentation here.

The funcs array is given as innerHTML that is the text between the <g2-chart> tags.

All other properties are given as parameters into the opening tag:

• width: Width of the element in px.
• height: Height of the element in px.
• xmin: The lowest number on the x-axis.
• ymin: The lowest number on the y-axis.
• xmax: The highest number on the x-axis.
• ymax: The highest number on the y-axis.
• title: The title of the graph.

Examples #

<g2-chart width="301" height="150" ymin=-3 title="Test">
[{ "data": [-2,6,0,-2,2,1,4,1,6,5], "fill":true, "dots":true }]
</g2-chart>

Functions to draw graphs are supported, but the usage of outside variables is not. However, the chart can be updated from the outside; see the third example.

<g2-chart width="300" height="150" xmin=-1.8 xmax=6.28 ymin=-3 ymax=3 title="Test">
[
    {"fn":Math.sin,"dx":0.104,"fill":true},
    {"fn":Math.tan,"dx":0.0349,"fill":true}
]
</g2-chart>

The g2-chart HTML element can also be used to be referenced by another instance of g2. The funcs object can be updated accordingly using the setFuncs function.

<g2-chart id="chart"></g2-chart>
<script>
    const chart = document.getElementById('chart');
    const funcs = [{"data": [-2,6,0,-2,2,1,4,1,6,5], "fill":true, "dots":true}]

    chart.setFuncs(funcs).render();
</script>

Note: Don't forget to use quotations (e.g. "data") for the properties, since the g2-chart interprets the innerHTML using the JSON format.