How to integrate highcharts library

Ask us anything How do I?
1

I’m trying to use the highchart library on weweb because the chartJS plugin is not adequate for my use case.
So I added the highcharts installation script in the :
<script src="https://code.highcharts.com/highcharts.js"></script>
Then I added an HTML embed element, in which I put the simple code to create the first chart, according to the highchart tutorial:

<script>
document.addEventListener('DOMContentLoaded', function () {
        const chart = Highcharts.chart('chart', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        });
    });
</script>

But when I’m in preview mode, the chart doesn’t show up.
Did some of you manage to integrate this library or another one? Do you see a mistake in what I did?

2

custom scripts and css added at page or project level do not render in preview mode but only in the live app.

The best practice for integrating custom libraries/code is creating a custom weweb component..

Are you confortable with coding in javascript? Weweb components are made in Vuejs plus some convention for the editor options.

You can have a look at my integration of Stripe Elements or weweb open source components.

Feel free to dm me if you need help

3

Damn, I’m not familiar enough with Javascript. I might try to do it, but it will take me far too long.
I was chatting in the chat room several weeks ago, and was told that after a recent weweb release, the code in the head of a page would be supported in preview mode.
What did I misunderstand?

4

Custom scripts and css added at page or project level do not render in preview mode but only in the live app.
A custom script in an html element will be executed.

Dynamic values you put inside the html element may expose you to XSS attacks because it updates the element innerHTML directly. See this example.

Also the code inside script tags in the html element is executed using eval.

Custom elements avoid this kind of problem, that’s because it’s the best practice.

Be mindful of the security concerns and choose what you want to use.

keep-calm-with-great-power-comes-great-responsibility-5
keep-calm-with-great-power-comes-great-responsibility-5700×800 21.3 KB

5

Ok, i try to di this.
I followed the instructions to create a component. The local installation didn’t work so I went to stackblitz.com and created a Vite.js project. The installation is going well. The project is on Git and I try to import the component on weweb. But the build is failing:

screenshot-dashboard.weweb.io-2022.08.12-12_48_19
screenshot-dashboard.weweb.io-2022.08.12-12_48_191440×860 106 KB

Github repo :

Edit : Buil successful now. The failure was caused by the structure of the files created on vite.js (or by a bad manipulation of my part on the tool).

6

What OS are you using?
What version of node?

I know from experience that it works with Ubuntu v20 and Windows v10, both with node v16.16

7

We confirmed that one of our customer successfully create an internal component using the highchart Vuejs library.
Let’s use this thread to help you through the dev process :slight_smile:

8

Thanks Aurelie. For the moment i can’t dev this component due to my local dev environnement issue :