RM-Graphs Core - Charting library built on SciChart
npm install @rm-graph/corebash
npm install @rm-graph/core
`
> scichart is automatically installed as a dependency!
Usage
`typescript
import { createColumn3DChart, createPRPDChart } from '@rm-graph/core';
// Create a 3D column chart
const chart = await createColumn3DChart('container-id', {
theme: 'dark',
data: [[45, 1500, 1], [90, 2200, 2], [180, 1800, 3]],
xAxisTitle: 'Phase Angle (°)',
yAxisTitle: 'Amplitude (mVp)',
zAxisTitle: 'Cycle',
});
// Update data
chart.setData([[50, 1600, 1], [95, 2300, 2]]);
// Change theme
chart.setOptions({ theme: 'light' });
// Cleanup when done
chart.destroy();
`
Chart Types
$3
3D column/bar chart for phase-resolved data visualization. Built on SciChart 3D with WebGL rendering.
`typescript
import { createColumn3DChart } from '@rm-graph/core';
import type { Column3DDataPoint, Column3DChartStats } from '@rm-graph/core';
const chart = await createColumn3DChart('container-id', {
data: [[45, 1500, 1], [90, 2200, 2], [180, 1800, 3]],
xAxisTitle: 'Phase Angle (°)',
yAxisTitle: 'Amplitude (mVp)',
zAxisTitle: 'Cycle',
xRange: { min: 0, max: 360 },
yRange: { min: 0, max: 5000 },
zRange: { min: 0, max: 50 },
barFill: '#52aaf2',
barOpacity: 0.95,
showSineWave: true,
enableCameraClamping: true,
onStatsChange: (stats: Column3DChartStats) => {
console.log('Pulse Count:', stats.pulseCount, 'Peak:', stats.peakValue);
},
});
// Update data
chart.setData([[50, 1600, 1], [95, 2300, 2]]);
// Change camera preset
chart.setCameraPreset(0); // Top view
// Reset camera
chart.resetCamera();
// Take screenshot
chart.captureScreenshot('chart-screenshot');
// Cleanup
chart.destroy();
`
Data format: [phaseAngle, amplitude, cycle] - each tuple represents a 3D column bar.
Key features: Camera presets, orbit rotation with clamping, sine wave overlay, zoom control, screenshot export, statistics tracking.
$3
Phase Resolved Partial Discharge heatmap visualization.
Data format: [phaseAngle, amplitude, count] - each tuple represents pulse density at a given position.
Key features: Heatmap color coding, sine wave overlay, resolution modes, windowing support, screenshot export.
Theming
Built-in themes: light, dark, modern, midnight
`typescript
import { getThemeManager } from '@rm-graph/core';
// Register custom theme
getThemeManager().registerTheme({
name: 'custom',
backgroundColor: '#1a1a2e',
colorPalette: ['#ff6b6b', '#4ecdc4'],
// ...
});
``