Pre loader

Aligning top and bottom charts

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

1
0

I have a top chart that is a heatmap and there is another bottom chart that is a temperature map. I want the heatmap not show any y-axis labels but still keep the x-axis start aligned from the left side. I tried turning off the y-axis lables (which I do not need in the heatmap), but that moves the heatmap to the left and not kept aligned with the bottom chart.

const yAxis = new NumericAxis(wasmContext, {
autoRange: EAutoRange.Always,
labelFormat: ENumericFormat.Decimal,
labelPrecision: 2,
labelPostfix: "C",
drawLabels: false
});

The above code hides the y-axis labels but also removes the space on the left side so the x-axis of both graphs does not remained aligned. I need a way to somehow keep the start of x-axis aligned for both top and bottom graphs.

Version
latest
Images
  • You must to post comments
0
0

Hi Joel

Try this trick, from Tutorial 09 – Linking Multiple Charts

Synchronizing Chart Widths

We’ve got two charts with synchronyzed X VisibleRanges. However it would be even better if they had the same width and were placed exactly under each other.

To achieve it we create SciChartVerticalGroup and add both surfaces to the grou

                ...
import { SciChartVerticalGroup } from "scichart/Charting/LayoutManager/SciChartVerticalGroup";

async function initSciChart() {
    const verticalGroup = new SciChartVerticalGroup();

    // CREATE FIRST CHART
    const createFirstChart = async () => {
        ...
        verticalGroup.addSurfaceToGroup(sciChartSurface);

        return { sciChartSurface, wasmContext };
    }

    // CREATE SECOND CHART
    const createSecondChart = async () => {
        ...
        verticalGroup.addSurfaceToGroup(sciChartSurface);

        return { sciChartSurface, wasmContext };
    }

    // PARALLEL CREATION OF CHARTS
    const res = await Promise.all([createFirstChart(), createSecondChart()]);
    // Perform zoomExtends to redraw the charts
    res.forEach((el) => {
        el.sciChartSurface.zoomExtents();
    });
    ...
}
initSciChart();

results in this

enter image description here

Best regards,
Andrew

  • You must to post comments
0
0

I also want to know that

  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies