Pre loader

Having issue with X-Axis labeling when fewer data points

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0
0

I have a situation where i have just 2 data points, so stead of showing 2 narrow data points with a data range, its showing a repeated date with one big fat bar.

Version
3.2.446
Images
  • You must to post comments
0
0

Without enough information to reproduce, I’m guessing what’s happening is this

  • When you put data on the chart, by default axis.autoRange = EAutoRange.Once. This scales to fit to the axis once on startup (read more here)
  • Because you have one data-point and a column series, the xAxis is auto fitting this data making one large bar fitting the entire chart
  • Therefore, if you want to override this range and have the bar smaller, you will need to provide a default axis.visibleRange at startup

for example: see Axis Ranging – Set Range and Zoom to Fit

Setting Axis.VisibleRange Programmatically

To programmatically range an axis, set the AxisCore.visibleRange
property with a NumberRange type.

const {
    SciChartSurface,
    NumericAxis,
    SciChartJsNavyTheme,
    NumberRange,
  } = SciChart;
  
  // or, for npm, import { SciChartSurface, ... } from "scichart"
  
  // Create a chart with X,Y axis
  const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
    theme: new SciChartJsNavyTheme()
  });
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
  
  // Allow updating visibleRange
  document.getElementById("update-chart-button").addEventListener("click", () => {
    const yAxis = sciChartSurface.yAxes.get(0);
  
    const min = Math.random() * 0.5;
    yAxis.visibleRange = new NumberRange(min, min + 1);
    const range = yAxis.visibleRange;
    const message = `YAxis VisibleRange is ${range.min.toFixed(2)}, ${range.max.toFixed(2)}`;
    document.getElementById("update-range-label").textContent = message;
    console.log(message);
  });
  

See the Axis Ranging – Set Range and Zoom to Fit documentation page for a live codepen.

Once you have set the axis.visibleRange adding further data-points will not zoom to fit on the axis but you can call sciChartSurface.zoomExtents() at any time to force a zoom to fit.

It’s also possible to zoom to fit a single axis. You can do this also by following steps in the documentation page above, under the section titled Zooming to Fit All the Data.

Best regards,
Andrew

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.