How to use the @hpcc-js/layout.ChartPanel function in @hpcc-js/layout

import { Bar, Line, Pie, Radar } from "@hpcc-js/chart"
import { ChartPanel } from "@hpcc-js/layout"
import { DockPanel } from "@hpcc-js/phosphor"

var examResults = {
    columns: ["Subject", "Year 1", "Year 2", "Year 3"],
    data: [
        ["Geography", 75, 68, 65],
        ["English", 45, 55, 52],
        ["Math", 98, 92, 90],
        ["Science", 66, 60, 72]
    ]
};

//  Chart Panel (Bar Chart)  ---
const bar = new ChartPanel()
    .widget(new Bar())
    .title("Bar Chart")
    .columns(examResults.columns)
    .data(examResults.data)
    ;

//  Pie Chart  ---
const pie = new Pie()
    .columns(examResults.columns)
    .data(examResults.data)
    .paletteID("Paired")
    ;

//  Line  ---
const line = new Line()
    .columns(examResults.columns)

.columns(data.ND.subjects.columns)
                                            .data(data.ND.subjects.data)
                                            , "Step Chart"
                                        )
                                        .addTab(new Pie()
                                            .columns(data.TwoD.subjects.columns)
                                            .data(data.TwoD.subjects.data)
                                            , "Pie Chart", true), "Nested Example"
                                    )
                                );
                                break;
                            case Surface:
                            case Toolbar:
                                break;
                            case ChartPanel:
                                render(new ChartPanel()
                                    .widget(new Column())
                                    .title("Hello and Welcome!")
                                    .columns(data.ND.subjects.columns)
                                    .data(data.ND.subjects.data)
                                );
                                break;
                            case Legend:
                                break;
                            case HorizontalList:
                                const hlData: Array<[string, number, number]> = [
                                    ["A", 34, 21],
                                    ["B", 55, 34],
                                    ["C", 54, 90],
                                    ["D", 80, 153],
                                    ["E", 86, 92],
                                    ["F", 144, 233]

import { Column } from "@hpcc-js/chart";
import { ChartPanel } from "@hpcc-js/layout";

const cp = new ChartPanel()
    .widget(new Column())
    .target("target")
    .columns(["Subject", "Year 1", "Year 2", "Year 3"])
    .data([
        ["Geography", 75, 68, 65],
        ["English", 45, 55, -52],
        ["Math", 98, 92, 90],
        ["Science", 66, 60, 72]
    ])
    .title("Exam Results 2008->10")
    .legendVisible(true)
    .render()
    ;

import { Column } from "@hpcc-js/chart";
import { ChartPanel } from "@hpcc-js/layout";

const cp = new ChartPanel()
    .widget(new Column()
        .overrideMethod("fillColor", (row, col, sel) => {
            switch (col) {
                case "Year 1":
                    return "lightgray";
                case "Year 2":
                    return "lightblue";
                case "Year 3":
                    return "lightgreen";
            }
        })
    )
    .target("target")
    .columns(["Subject", "Year 1", "Year 2", "Year 3"])
    .data([
        ["Geography", 75, 68, 65],

import { DockPanel } from "@hpcc-js/phosphor";
import { ChartPanel } from "@hpcc-js/layout";
import { Column } from "@hpcc-js/chart";

var chart1 = new ChartPanel()
	.widget(new Column().tooltipValueFormat(",.0f"))
    .columns(["StackOverflow Tag", "Today", "This Week"])
    .data(get_data().map(n=>[n[0],n[2],n[3]]))
    .title("Usage Today & This Week")
    .legendVisible(true)
    ;
var chart2 = new ChartPanel()
	.widget(new Column().tooltipValueFormat(",.0f"))
    .columns(["StackOverflow Tag", "All Time Tag Usage"])
    .data(get_data().map(n=>[n[0],n[1]]))
    .title("All-Time Usage")
    ;
new DockPanel()
    .addWidget(chart1, "")
    .addWidget(chart2, "")
    .hideSingleTabs(true)

import { Palette } from "@hpcc-js/common";
import { Column } from "@hpcc-js/chart";
import { ChartPanel } from "@hpcc-js/layout";

Palette.ordinal("Jackie Brown", ["#BAA378", "#382E1C", "#C0A172", "#453823", "#BAA378", "#2C2416"]);

const cp = new ChartPanel()
    .widget(new Column().paletteID("Jackie Brown"))
    .target("target")
    .columns(["Subject", "Year 1", "Year 2", "Year 3"])
    .data([
        ["Geography", 75, 68, 65],
        ["English", 45, 55, -52],
        ["Math", 98, 92, 90],
        ["Science", 66, 60, 72]
    ])
    .title("Exam Results 2008->10")
    .legendVisible(true)
    .render()
    ;

IncludeRawValue: true,
                IncludeFormatted: true,
                IncludeMeasure: true,
                IncludeCreator: true,
                IncludeCreatorType: false
            }
        })
        .on("click", (row, col, sel) => {
            this.refresh();
        })
        ;

    private chart = new TimingColumn()
        .yAxisDomainLow(0 as any)
        ;
    private chartPanel = new ChartPanel()
        .dataButtonVisible(false)
        .downloadButtonVisible(false)
        .legendButtonVisible(false)
        .legendVisible(true)
        .titleOverlay(true)
        .widget(this.chart)
        ;

    private metricsSelect;

    constructor(wuid: string, timelineTarget: string, chartTarget: string, metricsSelectTarget: string) {
        this.wu = Workunit.attach({ baseUrl: "" }, wuid);
        this.timeline
            .target(timelineTarget)
            .wuid(wuid)
            ;

import { Column } from "@hpcc-js/chart";
import { ChartPanel } from "@hpcc-js/layout";

new ChartPanel()
    .widget(new Column())
    .target("target")
    .columns(["Subject", "Year 1", "Year 2", "Year 3"])
    .data([
        ["Geography", 75, 68, 65],
        ["English", 45, 55, -52],
        ["Math", 98, 92, 90],
        ["Science", 66, 60, 72]
    ])
    .title("Exam Results 2008->10")
    .legendVisible(true)
    .legend_showSeriesTotal(true)
    .legend_showLegendTotal(true)
    .render()
    ;