# How to put charts(such as Highcharts or echarts) or div label into GUI **URL:** \ **Category:** Questions\ **Tags:** gui\ **Created:** [July 15, 2022, 8:40am UTC](https://forum.babylonjs.com/t/how-to-put-charts-such-as-highcharts-or-echarts-or-div-label-into-gui/32207 "2022-07-15T08:40:06Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![yifei\_xu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/yifei_xu/32/25671_2.png) [@yifei\_xu](https://forum.babylonjs.com/u/yifei_xu)\ **Post date:** [July 15, 2022, 8:40am UTC](https://forum.babylonjs.com/t/how-to-put-charts-such-as-highcharts-or-echarts-or-div-label-into-gui/32207/1 "2022-07-15T08:40:06Z")
My workaround is output a picture as image Textures at present, but this way will consumes too many resources. So I wanted to ask if there was any other way ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [July 15, 2022, 11:41am UTC](https://forum.babylonjs.com/t/how-to-put-charts-such-as-highcharts-or-echarts-or-div-label-into-gui/32207/2 "2022-07-15T11:41:57Z")
You sadly can’t easily project an HTML element in a 3D scene. there are workarounds, and small hacks and tricks that might make it look like it is working well, but Babylon doesn’t officially support any of those. Maybe another community member can suggest a different course of action 🙂 ---
**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\ **Post date:** [July 17, 2022, 1:49am UTC](https://forum.babylonjs.com/t/how-to-put-charts-such-as-highcharts-or-echarts-or-div-label-into-gui/32207/3 "2022-07-17T01:49:25Z")
Some libraries, like the echarts one that you mentioned, can render to a canvas element, which Babylon supports creating and updating a dynamic texture from. 🙂 For a simple example here I created an echarts chart on an offscreen canvas and then created a DynamicTexture from that canvas, which is projected onto a plane mesh: > **[Babylon.js Playground](https://playground.babylonjs.com/#53KP6M)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![yifei\_xu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/yifei_xu/32/25671_2.png) [@yifei\_xu](https://forum.babylonjs.com/u/yifei_xu)\ **Post date:** [July 21, 2022, 1:53am UTC](https://forum.babylonjs.com/t/how-to-put-charts-such-as-highcharts-or-echarts-or-div-label-into-gui/32207/4 "2022-07-21T01:53:43Z")
thanks a lot for your help! 😄 ---
**Author:** ![yifei\_xu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/yifei_xu/32/25671_2.png) [@yifei\_xu](https://forum.babylonjs.com/u/yifei_xu)\ **Post date:** [July 21, 2022, 1:59am UTC](https://forum.babylonjs.com/t/how-to-put-charts-such-as-highcharts-or-echarts-or-div-label-into-gui/32207/5 "2022-07-21T01:59:25Z")
You are right, I think GUI can put HTML elements in 3D scenes from this example, thank you for reply 😃 [Simple HTML GUI | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#1AHPN5) ---
**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\ **Post date:** [July 21, 2022, 3:49pm UTC](https://forum.babylonjs.com/t/how-to-put-charts-such-as-highcharts-or-echarts-or-div-label-into-gui/32207/6 "2022-07-21T15:49:22Z")
Hmm, in the example you posted the HTML element isn’t actually part of the 3D scene, it’s just overlayed overtop of it. If that’s what you’re going for then I would follow the examples from whatever charting package you want to use and then just make sure that whatever html element has the chart on it has a higher [z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) than Babylon’s canvas (e.g. 0 for the Babylon canvas and 1 for the chart element). ---
**Author:** ![yifei\_xu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/yifei_xu/32/25671_2.png) [@yifei\_xu](https://forum.babylonjs.com/u/yifei_xu)\ **Post date:** [July 27, 2022, 6:18am UTC](https://forum.babylonjs.com/t/how-to-put-charts-such-as-highcharts-or-echarts-or-div-label-into-gui/32207/7 "2022-07-27T06:18:33Z")
NoNONO, in fack your answer is what I want, it is easily to set z-index but this way can’t show charts in a 3D scene. What’s more I find when I put a gltf model in this scene the model will lost textures and become black, so I find a new way: use echarts’s API called “myChart.getDataURL(opts)”