Back

Samples

Here are the list of samples you can create from basic to advance charts.

Vertical

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")

        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May"],
            datasets: [
                {
                    label: 'Dataset 1',
                    data: [50, 50, 30, 15, 30],
                    borderWidth: 1,
                    backgroundColor: ["#f44336", "#e91e63", "#9c27b0", "#3f51b5", "#009688"]
                }, {
                    label: 'Dataset 2',
                    data: [10, 50, -34, 20, 79],
                    borderWidth: 1,
                    backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"]
                }
            ]
        }

        options = {
            responsive: true,
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: 'Bar Chart Sample'
            }
        }

        barChart = chart.CreateChart(data, "bar", 0.95, 0.4, options)
        lay.AddChild(barChart)

    app.AddLayout(lay)
}
Copy Run

Horizontal

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")

        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May"],
            datasets: [
                {
                    label: 'Dataset 1',
                    data: [50, -20, 30, 15, 30],
                    borderWidth: 1,
                    backgroundColor: ["#f44336", "#e91e63", "#9c27b0", "#3f51b5", "#009688"]
                }, {
                    label: 'Dataset 2',
                    data: [10, -50, 40, -20, 79],
                    borderWidth: 1,
                    backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"]
                }
            ]
        }

        options = {
            responsive: true,
            legend: {
                position: 'bottom'
            }
        }

        barChart = chart.CreateChart(data, "horizontalBar", 0.95, 0.4, options)
        lay.AddChild(barChart)

    app.AddLayout(lay)
}
Copy Run

RGBA Colors

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")

        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May"],
            datasets: [
                {
                    label: 'Dataset 1',
                    data: [50, -20, 30, 15, 30],
                    borderWidth: 1,
                    backgroundColor: [
                        'rgba(3, 169, 244, 0.3)',
                        'rgba(244, 67, 54, 0.3)',
                        'rgba(233, 30, 99, 0.3',
                        'rgba(156, 39, 176, 0.3)',
                        'rgba(255, 152, 0, 0.3)'
                    ],
                    borderColor: [
                        'rgba(3, 169, 244, 0.9)',
                        'rgba(244, 67, 54, 0.9)',
                        'rgba(233, 30, 99, 0.9',
                        'rgba(156, 39, 176, 0.9)',
                        'rgba(255, 152, 0, 0.9)'
                    ]
                }
            ]
        }

        barChart = chart.CreateChart(data, "bar", 1, 0.5)
        lay.AddChild(barChart)

    app.AddLayout(lay)
}
Copy Run

Chart Title

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")

        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May"],
            datasets: [
                {
                    label: 'Dataset 1',
                    data: [50, -20, 30, 15, 30],
                    borderWidth: 1,
                    backgroundColor: [
                        'rgba(3, 169, 244, 0.3)',
                        'rgba(244, 67, 54, 0.3)',
                        'rgba(233, 30, 99, 0.3',
                        'rgba(156, 39, 176, 0.3)',
                        'rgba(255, 152, 0, 0.3)'
                    ],
                    borderColor: [
                        'rgba(3, 169, 244, 0.9)',
                        'rgba(244, 67, 54, 0.9)',
                        'rgba(233, 30, 99, 0.9',
                        'rgba(156, 39, 176, 0.9)',
                        'rgba(255, 152, 0, 0.9)'
                    ]
                }
            ]
        }

        options = {
            title: {
                display: true,
                text: "This is the Chart Title"
            }
        }

        barChart = chart.CreateChart(data, "bar", 1, 0.5, options)
        lay.AddChild(barChart)

    app.AddLayout(lay)
}
Copy Run

Bar - Multi Axis

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")

        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May"],
            datasets: [
                {
                    label: 'Dataset 1',
                    data: [50, -20, 30, 15, 30],
                    borderWidth: 1,
                    backgroundColor: ["#f44336", "#e91e63", "#9c27b0", "#3f51b5", "#009688"],
                    yAxisID: 'y-axis-1'
                }, {
                    label: 'Dataset 2',
                    data: [10, -50, 40, -20, 79],
                    borderWidth: 1,
                    backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"],
                    yAxisID: 'y-axis-2'
                }
            ]
        }

        options = {
            responsive: true,
            tooltips: {
                mode: 'index',
                intersect: true
            },
            scales: {
                yAxes: [{
                    type: 'linear',
                    display: true,
                    position: 'left',
                    id: 'y-axis-1',
                }, {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    id: 'y-axis-2',
                    gridLines: {
                        drawOnChartArea: false
                    }
                }],
            }
        }

        barChart = chart.CreateChart(data, "bar", 0.95, 0.4, options)
        lay.AddChild(barChart)

    app.AddLayout(lay)
}
Copy Run

Stacked

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")

        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May"],
            datasets: [
                {
                    label: 'Dataset 1',
                    data: [50, -20, 30, 15, 30],
                    backgroundColor: "#f44336"
                },
                {
                    label: 'Dataset 2',
                    data: [10, -50, 40, -20, 79],
                    backgroundColor: "#5E35B1"
                },
                {
                    label: 'Dataset 3',
                    data: [20, 35, 56, 23, 67],
                    backgroundColor: "#039BE5"
                }
            ]
        }

        options = {
            responsive: true,
            scales: {
                xAxes: [{
                    stacked: true,
                }],
                yAxes: [{
                    stacked: true
                }]
            }
        }

        barChart = chart.CreateChart(data, "bar", 0.95, 0.4, options)
        lay.AddChild(barChart)

    app.AddLayout(lay)
}
Copy Run

Stacked Groups

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")

        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May"],
            datasets: [
                {
                    label: 'Dataset 1',
                    data: [50, -20, 30, 15, 30],
                    backgroundColor: "#f44336",
                    stack: 'Stack 0'
                },
                {
                    label: 'Dataset 2',
                    data: [10, -50, 40, -20, 79],
                    backgroundColor: "#5E35B1",
                    stack: 'Stack 0'
                },
                {
                    label: 'Dataset 3',
                    data: [20, 35, 56, 23, 67],
                    backgroundColor: "#039BE5",
                    stack: 'Stack 1'
                }
            ]
        }

        options = {
            responsive: true,
            tooltips: {
                mode: 'index',
                intersect: false
            },
            scales: {
                xAxes: [{
                    stacked: true,
                }],
                yAxes: [{
                    stacked: true
                }]
            }
        }

        barChart = chart.CreateChart(data, "bar", 0.95, 0.4, options)
        lay.AddChild(barChart)

    app.AddLayout(lay)
}
Copy Run

Line Basic

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")

        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            datasets: [
                {
                    label: 'First Dataset',
                    data: [50, 50, 30, 15, 30, 34],
                    backgroundColor: "#f44336",
                    borderColor: "#f44336",
                    fill: false
                }, {
                    label: 'Second Dataset',
                    data: [10, 50, -34, 20, 79, 45],
                    backgroundColor: "#039BE5",
                    borderColor: "#039BE5",
                    fill: false
                }
            ]
        }

        options = {
            responsive: true,
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Month'
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Value'
                    }
                }]
            }
        }

        lineChart = chart.CreateChart(data, "line", 0.95, 0.4, options)
        lay.AddChild(lineChart)

    app.AddLayout(lay)
}
Copy Run

Line - Multi Axis

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")

        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            datasets: [
                {
                    label: 'First Dataset',
                    data: [50, 50, 30, 15, 30, 34],
                    backgroundColor: "#f44336",
                    borderColor: "#f44336",
                    fill: false,
                    yAxisID: 'y-axis-1'
                }, {
                    label: 'Second Dataset',
                    data: [10, 50, -34, 20, 79, 45],
                    backgroundColor: "#039BE5",
                    borderColor: "#039BE5",
                    fill: false,
                    yAxisID: 'y-axis-2'
                }
            ]
        }

        options = {
            responsive: true,
            hoverMode: 'index',
            stacked: false,
            scales: {
                yAxes: [{
                    type: 'linear',
                    display: true,
                    position: 'left',
                    id: 'y-axis-1'
                }, {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    id: 'y-axis-2',
                    gridLines: {
                        drawOnChartArea: false
                    }
                }]
            }
        }

        lineChart = chart.CreateChart(data, "line", 0.95, 0.4, options)
        lay.AddChild(lineChart)

    app.AddLayout(lay)
}
Copy Run

Pointed Line Chart

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")

        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            datasets: [
                {
                    label: 'First Dataset',
                    data: [10, 50, 30, 80, 30, 100],
                    backgroundColor: "#f44336",
                    borderColor: "#f44336",
                    fill: false
                }
            ]
        }

        options = {
            responsive: true,
            elements: {
				line: {
					tension: 0.000001
				}
			}
        }

        lineChart = chart.CreateChart(data, "line", 0.95, 0.4, options)
        lay.AddChild(lineChart)

    app.AddLayout(lay)
}
Copy Run

Line Stepped

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")

    scrl = app.CreateScroller(1, 1)
    scrlLay = app.CreateLayout('Linear')

        // values for steppedLine are:
        // false, true, 'before', 'after', 'middle'

        lineChart1 = chart.CreateChart(GenerateData(false, 'steppedLine:false'), "line", 1, 0.4)
        scrlLay.AddChild(lineChart1)

        lineChart2 = chart.CreateChart(GenerateData(true, 'steppedLine:true'), "line", 1, 0.4)
        scrlLay.AddChild(lineChart2)

        lineChart3 = chart.CreateChart(GenerateData('before',  'steppedLine:before'), "line", 1, 0.4)
        scrlLay.AddChild(lineChart3)

        lineChart4 = chart.CreateChart(GenerateData('after', 'steppedLine:after'), "line", 1, 0.4)
        scrlLay.AddChild(lineChart4)

        lineChart5 = chart.CreateChart(GenerateData('middle', 'steppedLine:middle'), "line", 1, 0.4)
        scrlLay.AddChild(lineChart5)

    scrl.AddChild(scrlLay)
    lay.AddChild(scrl)

    app.AddLayout(lay)
}

function GenerateData(stepType, label)
{
    return {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
        datasets: [
            {
                label: label,
                data: [50, 50, 30, 15, 30, 34],
                backgroundColor: 'rgba(244, 67, 54, 0.35)',
                borderColor: "#f44336",
                fill: false,
                steppedLine: stepType
            }
        ]
    }
}
Copy Run

Line Styles

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")

        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            datasets: [
                {
                    label: 'Unfilled',
                    fill: false,
                    data: [50, 50, 30, 15, 30, 34],
                    backgroundColor: "#f44336",
                    borderColor: "#f44336"
                }, {
                    label: 'Dashed',
                    fill: false,
                    borderDash: [5, 5],
                    data: [10, 50, -34, 20, 79, 45],
                    backgroundColor: "#039BE5",
                    borderColor: "#039BE5"
                }, {
                    label: 'Filled',
                    fill: true,
                    data: [12, -4, 50, 15, 65, -54],
                    backgroundColor: "#9c27b0",
                    borderColor: "#9c27b0"
                }
            ]
        }

        lineChart = chart.CreateChart(data, "line", 0.95, 0.4)
        lay.AddChild(lineChart)

    app.AddLayout(lay)
}
Copy Run

Point Styles

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")

    scrl = app.CreateScroller(1, 1)
    scrLay = app.CreateLayout('Linear')

        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
            datasets: [{
                label: 'My First dataset',
                backgroundColor: "#9c27b0",
                borderColor: "#9c27b0",
                data: [10, 23, 5, 99, 67, 43, 0],
                fill: false,
                pointRadius: 10,
                pointHoverRadius: 15,
                showLine: false
            }]
        }

        var circleOpt = CreateOptions('circle')
        circle = chart.CreateChart(data, "line", 1, 0.4, circleOpt)
        scrLay.AddChild(circle)

        var triangleOpt = CreateOptions('triangle')
        triangle = chart.CreateChart(data, "line", 1, 0.4, triangleOpt)
        scrLay.AddChild(triangle)

        var rectOpt = CreateOptions('rect')
        rect = chart.CreateChart(data, "line", 1, 0.4, rectOpt)
        scrLay.AddChild(rect)

        var rectRoundedOpt = CreateOptions('rectRounded')
        rectRounded = chart.CreateChart(data, "line", 1, 0.4, rectRoundedOpt)
        scrLay.AddChild(rectRounded)

        var rectRotOpt = CreateOptions('rectRot')
        rectRot = chart.CreateChart(data, "line", 1, 0.4, rectRotOpt)
        scrLay.AddChild(rectRot)

        var crossOpt = CreateOptions('cross')
        cross = chart.CreateChart(data, "line", 1, 0.4, crossOpt)
        scrLay.AddChild(cross)

        var crossRotOpt = CreateOptions('crossRot')
        crossRot = chart.CreateChart(data, "line", 1, 0.4, crossRotOpt)
        scrLay.AddChild(crossRot)

        var starOpt = CreateOptions('star')
        star = chart.CreateChart(data, "line", 1, 0.4, starOpt)
        scrLay.AddChild(star)

        var lineOpt = CreateOptions('line')
        line = chart.CreateChart(data, "line", 1, 0.4, lineOpt)
        scrLay.AddChild(line)

        var dashOpt = CreateOptions('dash')
        dash = chart.CreateChart(data, "line", 1, 0.4, dashOpt)
        scrLay.AddChild(dash)

    scrl.AddChild(scrLay)
    lay.AddChild(scrl)

    app.AddLayout(lay)
}

function CreateOptions(pointStyle)
{
    return {
        responsive: true,
        legend: {
            display: false
        },
        elements: {
            point: {
                pointStyle: pointStyle
            }
        }
    }
}
Copy Run

Point Sizes

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")

        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            datasets: [
                {
                    label: 'Big points',
                    data: GenerateData(),
                    backgroundColor: "#f44336",
                    borderColor: "#f44336",
                    fill: false,
                    borderDash: [5, 5],
					pointRadius: 15,
					pointHoverRadius: 10
                }, {
                    label: 'Individual point sizes',
                    borderDash: [5, 5],
                    data: GenerateData(),
                    backgroundColor: "#039BE5",
                    borderColor: "#039BE5",
                    fill: false,
                    borderDash: [5, 5],
					pointRadius: [2, 4, 6, 18, 0, 12]
                }, {
                    label: 'Large pointHoverRadius',
                    data: GenerateData(),
                    backgroundColor: "#9c27b0",
                    borderColor: "#9c27b0",
                    fill: false,
                    pointHoverRadius: 30
                },
                {
                    label: 'Large pointHitRadius',
                    data: GenerateData(),
                    backgroundColor: "#e91e63",
                    borderColor: "#e91e63",
                    fill: false,
                    pointHitRadius: 20
                }
            ]
        }

        lineChart = chart.CreateChart(data, "line", 0.95, 0.4)
        lay.AddChild(lineChart)

    app.AddLayout(lay)
}

function RandomNumber()
{
    return Math.floor(Math.random() * 100)
}

function GenerateData()
{
    return [
        RandomNumber(),
        RandomNumber(),
        RandomNumber(),
        RandomNumber(),
        RandomNumber(),
        RandomNumber()
    ]
}
Copy Run

Line Boundaries

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")

        fillFalse = chart.CreateChart(GenerateData(false), "line", 1, 0.25)
        lay.AddChild(fillFalse)

        fillOrigin = chart.CreateChart(GenerateData('origin'), "line", 1, 0.25)
        lay.AddChild(fillOrigin)

        fillStart = chart.CreateChart(GenerateData('start'), "line", 1, 0.25)
        lay.AddChild(fillStart)

        fillEnd = chart.CreateChart(GenerateData('end'), "line", 1, 0.25)
        lay.AddChild(fillEnd)

    app.AddLayout(lay)
}

function GenerateData(fillStyle)
{
    return {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
        datasets: [
            {
                label: 'No Fill',
                data: [50, -20, 60, 15, 70, -30],
                backgroundColor: 'rgba(244, 67, 54, 0.35)',
                borderColor: "#f44336",
                fill: fillStyle
            }
        ]
    }
}
Copy Run

Line Datasets

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")

        var colors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#4285F4', '#03a9f4', '#00bcd4', '#009688', '#4caf50']

        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            datasets: [{
                backgroundColor: colors[0],
                borderColor: colors[0],
                data: GenerateData(),
                label: 'D0'
            }, {
                backgroundColor: colors[1],
                borderColor: colors[1],
                data: GenerateData(),
                label: 'D1',
                fill: '-1'
            }, {
                backgroundColor: colors[2],
                borderColor: colors[2],
                data: GenerateData(),
                label: 'D2',
                fill: 1
            }, {
                backgroundColor: colors[3],
                borderColor: colors[3],
                data: GenerateData(),
                label: 'D3',
                fill: '-1'
            }, {
                backgroundColor: colors[4],
                borderColor: colors[4],
                data: GenerateData(),
                label: 'D4',
                fill: '-1'
            }, {
                backgroundColor: colors[5],
                borderColor: colors[5],
                data: GenerateData(),
                label: 'D5',
                fill: '+2'
            }, {
                backgroundColor: colors[6],
                borderColor: colors[6],
                data: GenerateData(),
                label: 'D6',
                fill: false
            }, {
                backgroundColor: colors[7],
                borderColor: colors[7],
                data: GenerateData(),
                label: 'D7',
                fill: 8
            }, {
                backgroundColor: colors[8],
                borderColor: colors[8],
                data: GenerateData(),
                label: 'D8',
                fill: 'end'
            }]
        }

        options = {
			maintainAspectRatio: false,
			spanGaps: false,
			elements: {
				line: {
					tension: 0.000001
				}
			},
			scales: {
				yAxes: [{
					stacked: true
				}]
			},
			plugins: {
				filler: {
					propagate: false
				},
				'samples-filler-analyser': {
					target: 'chart-analyser'
				}
			}
		}

        lineChart = chart.CreateChart(data, "line", 1, 0.5, options)
        lay.AddChild(lineChart)

    app.AddLayout(lay)
}

function RandomNumber()
{
    return Math.floor(Math.random() * 100)
}

function GenerateData()
{
    return [
        RandomNumber(),
        RandomNumber(),
        RandomNumber(),
        RandomNumber(),
        RandomNumber(),
        RandomNumber()
    ]
}
Copy Run

Line Stacked

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")

        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            datasets: [{
                label: "Dataset 1",
                borderColor: '#4285F4',
                backgroundColor: '#4285F4',
                data: GenerateData()
            }, {
                label: "Dataset 2",
                borderColor: '#03a9f4',
                backgroundColor: '#03a9f4',
                data: GenerateData()
            }, {
                label: "Dataset 3",
                borderColor: '#00bcd4',
                backgroundColor: '#00bcd4',
                data: GenerateData()
            }, {
                label: "Dataset 4",
                borderColor: '#009688',
                backgroundColor: '#009688',
                data: GenerateData()
            }]
        }

        options = {
			responsive: true,
            title: {
                display: true,
                text: 'Line Chart - Stacked Area'
            },
            tooltips: {
                mode: 'index',
            },
            hover: {
                mode: 'index'
            },
            scales: {
                yAxes: [{
                    stacked: true
                }]
            }
		}

        lineChart = chart.CreateChart(data, "line", 1, 0.5, options)
        lay.AddChild(lineChart)

    app.AddLayout(lay)
}

function RandomNumber()
{
    return Math.floor(Math.random() * 100)
}

function GenerateData()
{
    return [
        RandomNumber(),
        RandomNumber(),
        RandomNumber(),
        RandomNumber(),
        RandomNumber(),
        RandomNumber()
    ]
}
Copy Run

Area charts - Radar

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")

        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            datasets: [{
				backgroundColor: '#f44336',
				borderColor: '#f44336',
				data: GenerateData(),
				label: 'D0'
			}, {
				backgroundColor: '#e91e63',
				borderColor: '#e91e63',
				data: GenerateData(),
				hidden: true,
				label: 'D1',
				fill: '-1'
			}, {
				backgroundColor: '#9c27b0',
				borderColor: '#9c27b0',
				data: GenerateData(),
				label: 'D2',
				fill: 1
			}, {
				backgroundColor: '#673ab7',
				borderColor: '#673ab7',
				data: GenerateData(),
				label: 'D3',
				fill: false
			}, {
				backgroundColor: '#3f51b5',
				borderColor: '#3f51b5',
				data: GenerateData(),
				label: 'D4',
				fill: '-1'
			}, {
				backgroundColor: '#4285F4',
				borderColor: '#4285F4',
				data: GenerateData(),
				label: 'D5',
				fill: '-1'
			}]
        }

        var options = {
			maintainAspectRatio: true,
			spanGaps: false,
			elements: {
				line: {
					tension: 0.000001
				}
			},
			plugins: {
				filler: {
					propagate: false
				},
				'samples-filler-analyser': {
					target: 'chart-analyser'
				}
			}
		}

        radarChart = chart.CreateChart(data, "radar", 1, 0.5, options)
        lay.AddChild(radarChart)

    app.AddLayout(lay)
}

function RandomNumber()
{
    return Math.floor(Math.random() * 100)
}

function GenerateData()
{
    return [
        RandomNumber(),
        RandomNumber(),
        RandomNumber(),
        RandomNumber(),
        RandomNumber(),
        RandomNumber()
    ]
}
Copy Run

Scatter Charts

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")
    
        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            datasets: [{
                label: 'First Dataset',
				backgroundColor: '#f44336',
				borderColor: '#f44336',
				data: GenerateData()
			}, {
                label: 'Second Dataset',
				backgroundColor: '#e91e63',
				borderColor: '#e91e63',
				data: GenerateData()
			}]
        }

        scatterChart = chart.CreateChart(data, "scatter", 1, 0.5)
        lay.AddChild(scatterChart)

    app.AddLayout(lay)
}

function RandomNumber()
{
    return Math.floor(Math.random() * 100)
}

function GenerateData()
{
    var data = []
    for (var i = 0; i < 7; i++) {
        data.push({
            x: RandomNumber(),
            y: RandomNumber()
        })
    }
    return data
}
Copy Run

Doughnut Charts - Full

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")
    
        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            datasets: [{
                label: "Dataset 1",
                data: data: [20, 10, 40, 50, 83, 23],
				backgroundColor: ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#4285F4']
			}]
        }

        doughnutChart = chart.CreateChart(data, "doughnut", 1, 0.5)
        lay.AddChild(doughnutChart)

    app.AddLayout(lay)
}
Copy Run

Doughnut Charts - Semicircle

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")
    
        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            datasets: [{
                label: "Dataset 1",
                data: [20, 10, 40, 50, 83, 23],
				backgroundColor: ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#4285F4']
			}]
        }

        var options = {
            circumference: Math.PI,
            rotation: -Math.PI
        }

        doughnutChart = chart.CreateChart(data, "doughnut", 1, 0.5, options)
        lay.AddChild(doughnutChart)

    app.AddLayout(lay)
}
Copy Run

Pie Charts

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")
    
        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            datasets: [{
                label: "Dataset 1",
                data: [20, 10, 40, 50, 83, 23],
				backgroundColor: ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#4285F4']
			}]
        }

        pieChart = chart.CreateChart(data, "pie", 1, 0.5)
        lay.AddChild(pieChart)

    app.AddLayout(lay)
}
Copy Run

Polar Area Charts

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")
    
        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            datasets: [{
                label: "Dataset 1",
                data: [20, 10, 40, 50, 83, 23],
				backgroundColor: ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#4285F4']
			}]
        }

        options = {
            scale: {
                ticks: {
                    beginAtZero: true
                },
                reverse: false
            },
            legend: {
                position: 'bottom',
                display: true
            }
        }

        polarChart = chart.CreateChart(data, "polarArea", 1, 0.5, options)
        lay.AddChild(polarChart)

    app.AddLayout(lay)
}
Copy Run

Combo Bar Line Chart

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    lay.SetBackColor("#ffffff")
    
        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            datasets: [{
                type: 'line',
				label: 'Dataset 1',
				borderColor: '#f44336',
				borderWidth: 2,
				fill: false,
				data: [20, 10, 40, 50, 83, 23]
            }, {
				type: 'bar',
				label: 'Dataset 2',
				backgroundColor: '#e91e63',
				data: [5, 50, 20, 43, 67, 90],
				borderColor: 'white',
				borderWidth: 2
			}, {
				type: 'bar',
				label: 'Dataset 3',
				backgroundColor: '#673ab7',
				data: [10, 60, 21, 43, 50, 67]
			}]
        }

        options = {
            responsive: true,
            title: {
                display: true,
                text: 'Combo Bar Line Chart'
            },
            tooltips: {
                mode: 'index',
                intersect: true
            }
        }

        polarChart = chart.CreateChart(data, "bar", 1, 0.5, options)
        lay.AddChild(polarChart)

    app.AddLayout(lay)
}
Copy Run

Custom Background Color

cfg.Dark

app.LoadPlugin( "ChartJS" )

function OnStart() {
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout("Linear", "FillXY, VCenter")
    
        data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            datasets: [{
                label: 'Dataset label',
                backgroundColor: ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#4285F4'],
                data: [20, 10, 40, 50, 83, 23]
            }]
        }

        barChart = chart.CreateChart(data, "bar", 1, 0.5)
        barChart.SetBackColor('#424242')
        lay.AddChild(barChart)

    app.AddLayout(lay)
}
Copy Run