Custom ticks on scrolling X Axis - Editor
Custom ticks on scrolling X Axis
This example showcases custom tick positioning on a scrolling Axis.
Both major and minor ticks on X Axis are created in application code, and destroyed as the axis scrolls.
/* * LightningChartJS example that showcases a simulated ECG signal. */ // Import LightningChartJS const lcjs = require('@arction/lcjs') // Extract required parts from LightningChartJS. const { lightningChart, AxisScrollStrategies, AxisTickStrategies, UIElementBuilders, Themes, } = lcjs // Import data-generators from 'xydata'-library. const { createProgressiveTraceGenerator } = require('@arction/xydata') // Create a XY Chart. const chart = lightningChart().ChartXY({ // theme: Themes.darkGold }) .setTitle('Custom X ticks with scrolling Axis') // Create line series optimized for regular progressive X data. const series = chart.addLineSeries({ dataPattern: { // pattern: 'ProgressiveX' => Each consecutive data point has increased X coordinate. pattern: 'ProgressiveX', // regularProgressiveStep: true => The X step between each consecutive data point is regular (for example, always `1.0`). regularProgressiveStep: true, } }) .setMouseInteractions(false) // * Manage X Axis ticks with custom logic * // Disable default X ticks. const xAxis = chart.getDefaultAxisX() .setTickStrategy(AxisTickStrategies.Empty) const addCustomTickX = (pos, isMinor) => { const tick = xAxis.addCustomTick(UIElementBuilders.AxisTick) // Set tick text. .setTextFormatter(() => String(pos)) // Set tick location. .setValue(pos) // Style tick. .setMarker(marker => marker .setTextFont(font => font .setSize( isMinor ? 10 : 14 ) ) ) .setTickLength( isMinor ? 4 : 8 ) .setGridStrokeStyle(style => style.setFillStyle(fill => fill.setA( isMinor ? 50 : 100 ))) customTicks.push(tick) return tick } // Create custom ticks on X Axis on realtime scrolling application. let customTicks = [] const createTicksInRangeX = (start, end) => { // Major ticks every 1000 units. const majorTickInterval = 1000 for (let majorTickPos = start - (start % majorTickInterval); majorTickPos <= end; majorTickPos += majorTickInterval) { if (majorTickPos >= start) { addCustomTickX(majorTickPos, false) } } // Major ticks every 100 units, but not at same interval as major ticks. const minorTickInterval = 100 for (let minorTickPos = start - (start % minorTickInterval); minorTickPos <= end; minorTickPos += minorTickInterval) { if (minorTickPos >= start && minorTickPos % majorTickInterval !== 0) { addCustomTickX(minorTickPos, true) } } } // X range until which custom ticks are valid. let customTicksPos = 0 xAxis.onScaleChange((start, end) => { // Ensure new ticks are created. if (end > customTicksPos) { createTicksInRangeX(customTicksPos, end) customTicksPos = end } // Destroy ticks that are out of scrolling range. customTicks = customTicks.filter(tick => { if (tick.getValue() < start) { // Tick is out of view. tick.dispose() return false } else { return true } }) }) // Setup X Axis as progressive scrolling. xAxis .setTitle('X Axis (custom ticks)') .setInterval(0, 1400) .setScrollStrategy(AxisScrollStrategies.progressive) chart.getDefaultAxisY() .setTitle('Y Axis') // Stream data in. createProgressiveTraceGenerator() .setNumberOfPoints(10000) .generate() .setStreamRepeat(true) .setStreamInterval(1000/60) .setStreamBatchSize(5) .toStream() .forEach(point => { series.add(point) })
Custom ticks on scrolling X Axis
This example showcases custom tick positioning on a scrolling Axis.
Both major and minor ticks on X Axis are created in application code, and destroyed as the axis scrolls.