CODEWITHSUNDEEP
javascriptreactjschartsscichartscichart.js
texas697
texas697

Reputation: 6387

How to atart chart multiple YAxis(s) to zero

I am using scichartJS

"scichart": "^1.4.1607"

and I need to have my multiple Y-Axis(s) start at zero. And also the labels need to be aligned. Here is a screenshot of a different chart that does it correctly.

Here is link to documentation on setting the visibleRange.

Example-Screenshot

I am setting up my axis(s) in this function.

visibleRange ??
    const getYAxis = (x: YAxisData) =>
      new NumericAxis(wasmContext, {
        axisTitle: x.axisTitle,
        id: x.axisId,
        axisAlignment: setLocation(x),
        drawMinorTickLines: false,
        drawMajorTickLines: false,
        axisTitleStyle: {
          fontSize: 16,
          padding: Thickness.fromString('0 0 0 0'),
          color: theme.palette.grey['600'],
        },
      });

    yAxisData.forEach((x) => {
      const yAxis = getYAxis(x);
      yAxis.labelProvider.formatLabel = (dataValue) => {
        let value = formatNumberWithRounding(dataValue);
        if (value.includes(',')) value = `${value}k`;
        else value = `${Number(value).toFixed(2)}`;
        return value;
      };

      yAxis.drawMajorBands = false;
      yAxis.drawMinorGridLines = false;
      // yAxis.visibleRange = new NumberRange(5, 10);
      sciChartSurface.yAxes.add(yAxis);
    });

Which looks like this.

Current Chart

Upvotes: 1

Views: 164

Answers (1)

Dr. Andrew Burnett-Thompson
Dr. Andrew Burnett-Thompson

Reputation: 21521

If you want to ensure an axis always starts at zero in SciChart.js, you can try this code:

yAxis.visibleRangeChanged.subscribe(args => {
    if (args.visibleRange.min !== 0) {
        yAxis.visibleRange = new NumberRange(0, args.visibleRange.max);
    }
});

See How to Listen to VisibleRange changes

There is also an API in SciChart called the axis.visibleRangeLimit which can be used to clip autorange to a minimum and maximum. e.g. this:

// Ensure axis.visibleRange.min does not autorange outside 0
yAxis.visibleRangeLimit = new NumberRange(0, 99999999999);

However I think the first API will work better in your case.

Secondly about the alignment of ticks, you can use this API to define the spacing or interval of axis labels.

Axis Ticks - Gridline and Label Spacing (Interval)

yAxis.autoTicks = false; // Disable automatic tick calculation
yAxis.majorDelta = X; // set the spacing between major axis labels and gridlines
yAxis.minorDelta = Y; // set the spacing between minor axis gridlines

Finally there is a third more advanced API which provides unlimited customisation over the axis labels output, their spacing and coordinates. This API is called the TickProvider. How to use it:

yAxis.tickProvider.getMajorTicks = (minorDelta, majorDelta, visibleRange) => {
    // Force major gridlines and labels at these values always
    const outputTicks = [10,20,30,40,50];
    return outputTicks;
};
yAxis.tickProvider.getMinorTicks = (minorDelta, majorDelta, visibleRange) => {
    // Force minor gridlines at these values always
    const outputTicks = [5,15,25,35,45];
    return outputTicks;
};

This lets you return the exact numbers used for gridlines and labels. use this to customize SciChart as you wish!

Upvotes: 1

Related Questions