@hpcc-js/chart

This package is part of the mono repository "@hpcc-js" (aka Visualization Framework), for more information including Quick Start, Gallery and Tutorials, please visit the main page on GitHub: hpcc-systems/Visualization.

Exported Widgets

• Area
• Bar
• Bubble
• Bullet
• Column
• Contour
• Gantt
• Gauge
• Half Pie
• Heat
• Hex Bin
• Line
• Pie
• Quarter Pie
• Quartile Candlestick
• Radar
• Radial Bar
• Scatter
• Stat Chart
• Step
• Summary
• Summary (Canvas)
• Word Cloud
• XYAxis

Stand-alone HTML Example

<title>Simple Bar Chart</title> <script src="https://cdn.jsdelivr.net/npm/@hpcc-js/common"></script> <script src="https://cdn.jsdelivr.net/npm/@hpcc-js/api"></script> <script src="https://cdn.jsdelivr.net/npm/@hpcc-js/chart"></script>

<script> var chart = new window["@hpcc-js/chart"].Bar() .target("placeholder") .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] ]) .render(); </script>

Getting Started with @hpccjs

• Quick Start
• Tutorials
• Gallery (alt)
• Wiki

<script type="module"> import { Contour } from "@hpcc-js/chart";

    new Contour()
        .target("placeholder")
        .columns(["A", "B"])
        .data([
            [10, 10],
            [20, 20],
            [20, 30],
            [30, 20],
            [40, 30],
            [30, 40],
            [10, 20],
            [20, 10]
        ])
        .contourBandwidth(80)
        .contourStrokeWidth(0)
        .yAxisType("linear")
        .xAxisType("ordinal")
        .xAxisTitle("A")
        .render()
        ;
</script>