importing js library for charts

[unfrs]

Hello Sysreptor community, I hope you're doing well.

is there any way to use another Charts library other than chart.js?
For example - highcharts.

how do I import it?

[aronmolnar]

We additionally support mermaid diagrams (see Examples: https://mermaid.js.org/syntax/examples.html).

We currently don't have native support for other charts.
highcharts will not be supported with quite some confidence, unless they release the library under a permissive open source license.

It might still be possible to upload JavaScript files under the assets and load them from HTML, right @MWedl?

[MWedl]

SysReptor officially only supports chart.js, but it is possible to import and use other libraries. However, the solution is quite hacky. Here is an example for d3.js but you might be able to use highcharts as well.

The general appraoch is to upload the JS library as asset in the design and then dynamically import it via JavaScript. Then you need to render the chart to SVG or PNG/JPG and include the it as an inline image to HTML.

<component :is="{
    render() {},
    async mounted() {
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '/assets/name/d3.v7.min.js';
        await new window.Promise(resolve => {
            script.addEventListener('load', resolve);
            document.head.appendChild(script);
        });

        const script2 = document.createElement('script');
        script2.type = 'module';
        script2.text = document.getElementById('d3code').innerText;
        await new window.Promise(resolve => {
            script2.addEventListener('load', resolve);
            document.head.appendChild(script2);
        });
    }
}" />

<div id="d3container" />

<div v-show="false">
    <pre id="d3code" v-pre>
// Declare the chart dimensions and margins.
const width = 640;
const height = 400;
const marginTop = 20;
const marginRight = 20;
const marginBottom = 30;
const marginLeft = 40;

// Declare the x (horizontal position) scale.
const x = d3.scaleUtc()
    .domain([new Date("2023-01-01"), new Date("2024-01-01")])
    .range([marginLeft, width - marginRight]);

// Declare the y (vertical position) scale.
const y = d3.scaleLinear()
    .domain([0, 100])
    .range([height - marginBottom, marginTop]);

// Create the SVG container.
const svg = d3.create("svg")
    .attr("width", width)
    .attr("height", height);

// Add the x-axis.
svg.append("g")
    .attr("transform", `translate(0,${height - marginBottom})`)
    .call(d3.axisBottom(x));

// Add the y-axis.
svg.append("g")
    .attr("transform", `translate(${marginLeft},0)`)
    .call(d3.axisLeft(y));

// Append the SVG element.
const container = document.getElementById('d3container');
container.append(svg.node());
    </pre>
</div>

[aronmolnar]

Unfortunately, we cannot provide further support for Highcharts, as it allows only personal and non-commercial use.

Using the library for support purposes might already infringe their license terms, which we don't want to.

[unfrs]

That's okay, Thank you both for supporting. appreciate it.