Multi Chart
This example shows a multi chart interface that lets users switch between twelve chart types—including Area, Bar, Bubble, Column, Pie, and Radar—for the same five-subject score dataset. A dropdown menu triggers a re-render, clearing the previous chart and instantiating a new widget from the `@hpcc-js/chart` package via dynamic property access. The code uses `d3Select` from `d3-selection` to clear the placeholder, then applies columns and data to the selected chart constructor before calling `.render()`. The default view is a Column chart.
AI-generated descriptionTutorial 4: Multi Chart.
Building on the Pie Chart and Column Chart tutorials, lets step it up some more and let the user decide which chart to use.
1 - Import the entire chart package:
import * as hpccChart from "@hpcc-js/chart";
2 - Instantiate and render the visualisation base on a variable chartName:
new hpccChart[chartName]() // Create new instance of Widget
.target("placeholder") // Nominate target on web page
.columns(["Subject", "Result"]) // Set "Columns"
.data([ // Set "Data"
["English", 45],
["Irish", 28],
["Math", 98],
["Geography", 48],
["Science", 82]
])
.render() // Render
;