Cómo almacenar los atributos "data-" en la etiqueta html del componente

Hola, estoy desarrollando un plugin para gráficos usando chart.js. Para que la plantilla generada renderice el gráfico desde un modelo de datos generado por el plugin, necesito almacenar este modelo en la etiqueta html del componente. El modelo utilizado por la carta es el siguiente:

'''javascript { "tipo": "línea", "data": { "etiquetas": ["Rótulo 1", "Rótulo 2", "Rótulo 3", "Rótulo 4"], "conjuntos de datos": [{ "etiqueta": "Conjunto de datos 1", "datos": [3, 9, 8, 2], "colorBackground": "rgba(252,111,116, 0.7)", "borderColor": "rgba(35,100,224, 0.7)", "borderWidth": 2, "showLine": cierto, "pointStyle": "círculo" }] } }

Y deben almacenarse de esta manera:
'''html
<canvas class="gjs-chart" data-gjs-chart-model="
{
    'tipo': 'línea',
    'data': {
        'etiquetas': ['Rótulo 1', 'Rótulo 2', 'Rótulo 3', 'Rótulo 4'],
        'conjuntos de datos': [{
            'etiqueta': 'Conjunto de datos 1',
            'datos': [3, 9, 8, 2],
            'colorBackground': 'rgba(252,111,116, 0,7)',
            'borderColor': 'rgba(35,100,224, 0,7)',
            'borderWidth': 2,
            'showLine': cierto,
            'pointStyle': 'círculo'
        }]
    }
}">

Sin embargo, no sé cómo hacerlo. Si lo hago: '''javascript this.model.set ('data-gjs-chart-model', JSON.stringify(theChartModel));

El atributo HTML "data-gjs-chart-model" no se almacena en la sección "html" del almacenamiento, sino solo en la sección "components". De esta manera, el gráfico generado solo funciona en un entorno grapesjs, pero no funciona si solo tomo el html y el css de la plantilla generada y hago una página fuera del entorno grapesjs.