Usage
Basic Usage
- Initialize the Chartlet class with the glyphs url and add it to the leaflet map
const chartlet = new Chartlet("<chartx-glyphs-url>").addTo(map);
- Get the Chart Registry instance from Chartlet with the required options
const chartRegistry = await chartlet.getChartRegistry();
- Auto load everything from ChartX Server (recommended)
await chartRegistry.load("<chartx-server-url>");
tip
Note: The charts must be loaded only after the maplibre map has finished loading.
This can be achieved with map.on("load", () => {}) listener
Leaflet Plugin Initialization
Chartlet can also be initialized directly as a Leaflet plugin:
new L.Chartlet("<chartx-glyphs-url>")
or
L.chartlet("<chartx-glyphs-url>")
Chartlet
The central class to load ChartX into leaflet
Constructor parameters
| Parameter | Type | Description |
|---|---|---|
| glyphUrl | string | Glyphs url from ChartX Server |
Methods
| Method | Returns | Description |
|---|---|---|
| getChartRegistry(showBasemap?: boolean, options?: ChartOptions) | ChartRegistry | Initializes and returns an instance of ChartRegistry from chartx plugin with the given options |
| onChartClick(callback: (info: [QueryResult]) => void) | ChartClickSubscription | Registers a callback to be invoked when a chart feature is clicked. The callback is called with a [QueryResult] containing information about the selected chart feature. |
| getInfoAtLatLng(coords: L.LatLng, snapPixels=10) | [QueryResult] | Retrieves chart and feature information at the specified coordinates |
ChartClickSubscription
On chart click subscription provides an unsubscribe method to cleanup subscriptions after their use
ChartX API
Chartlet internally uses ChartX for all chart-related functionality.
👉 Refer to the ChartX documentation for full API details