I'm trying to create a lightning chart using lcjs.iife v3.4.0. Its X axis is in DateTime format. I could not zoom the X axis to less than 1 day time limit using axis.setInterval() function. Bigger time limits are zoomed precisely.
What could be the reason?
chart.html
<html>
<body>
<style>
button {padding: 10px; margin: 0 20px; font-size: 16px; color: green}
button[error] {color: red}
</style>
<div id="trend-main-chart-container" style="width: 100%; height: 50%;"></div>
<button onclick="resetXInterval(1)" error>Reset X Interval (1Hr)</button>
<button onclick="resetXInterval(72)">Reset X Interval (3Days)</button>
<button onclick="resetXInterval(168)">Reset X Interval (1Week)</button>
<script src="https://cdn.jsdelivr.net/npm/@arction/[email protected]/dist/lcjs.iife.js"></script>
<script>
// Extract required parts from LightningChartJS.
const {
lightningChart, Dashboard,
SolidLine, SolidFill,
ColorRGBA, ColorHEX, emptyFill, ColorCSS, UIElementBuilders, emptyLine,
Themes, customTheme, UIBackgrounds, UIDirections,
ColorPalettes, UILayoutBuilders, UIOrigins, UIVisibilityModes, MarkerBuilders,
FontSettings, IndividualPointFill, translatePoint,
AxisScrollStrategies, AxisTickStrategies, synchronizeAxisIntervals,
AreaSeriesTypes, PointShape,
AutoCursorModes,
} = lcjs //Note: @arction/lcjs is not needed here, when using IIFE assembly
</script>
<script>
const cssTextLite = '#eee'
// Create XY chart
const trendChartMain = lightningChart().ChartXY({
theme: Themes.auroraBorealis,
container: 'trend-main-chart-container',
disableAnimations: true
})
.setMouseInteractions(false)
.setAutoCursorMode(AutoCursorModes.disabled)
// Configure Y axix
const trendChartMainYAxis = trendChartMain.getDefaultAxisY()
trendChartMainYAxis
.setTitle('Title Y')
.setTitleFont(new FontSettings({ size: 24, style: 'bold' }))
.setTitleFillStyle(new SolidFill({ color: ColorHEX(cssTextLite) }))
.setScrollStrategy(AxisScrollStrategies.fitting)
.setTickStrategy(AxisTickStrategies.Numeric, tickStratergy => tickStratergy
.setMajorTickStyle((tickStyle) => tickStyle
.setLabelFont(new FontSettings({ size: 24, style: 'italic' }))
.setLabelFillStyle(new SolidFill({ color: ColorHEX(cssTextLite) }))
)
)
.setMouseInteractions(false)
// Configure X axis ad DateTime axis
const trendChartMainXAxis = trendChartMain.getDefaultAxisX()
.setMouseInteractions(false)
.setScrollStrategy()
.setTickStrategy(AxisTickStrategies.DateTime)
</script>
<script>
function resetXInterval(hrs) {
trendChartMainXAxis.setInterval(
// {hrs} before current time
new Date().getTime() - (1000 * 60 * 60 * (hrs || 1)),
// Current time
new Date().getTime()
)
}
resetXInterval(100)
</script>
</body>
</html>
Please check out Time series section in LightningChart JS Developer documentation
https://lightningchart.com/js-charts/docs/basic-topics/time-series-data/
Probably you can work with the first suggested solution there which is something like this: