1. Construct your array in the JavaScript window and pass it in from the snippet-processor function.
2. Put some hidden fields into your HTML so the script has reference to those arrays
3. Declare a div for your chart
4. Create a script block and add the chart details.

So, your html code looks like this...

<gs-row>
        <gs-title-block title="Filter Chart" padding="10" margin="0">
            <gs-row>
                <input id="X" type="hidden" value="{{form.arrayX}}" />
                <input id="Y" type="hidden" value="{{form.arryY}}" />
                <div id="myChart"></div>
            </gs-row>
        </gs-title-block>
    </gs-title-block>
</gs-row>

And your script would look something like this...

<script>
    console.log($("#arrayX").val().split(','));
    console.log($("#arrayY").val().split(','));

    
    var chart = c3.generate({
        bindto: '#myChart',
        data: {
            x: 'Date',
            xFormat : '%Y%m%d', // default '%Y-%m-%d'
            columns: [
                $("#arrayX").val().split(','),
                $("#arrayY").val().split(',')
            ]
        },
        axis : {
            x : {
                type : 'timeseries'
            }
        }
    });

</script>

Hi Chris,

It is possible to use c3 in custom manage screens however we are currently fixing the implementation of this on the new portal. It is still possible on the old portal.

We anticipate that this will be fixed in the next week or so.

-Pádraig