Pre loader

Y-axis data display error

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

Problem: Error in displaying 2 decimal places on Y axis, the displayed value will be greater than 1.

Requirements: The date displayed on the X axis of my data, and the date displayed on the Y axis are mostly 2 decimal places, but I need to click the broken line to highlight the broken line.

The code is as follows

import { SeriesSelectionModifier } from “scichart/Charting/ChartModifiers/SeriesSelectionModifier”;
import { XyDataSeries } from “scichart/Charting/Model/XyDataSeries”;
import { SciChartJSLightTheme } from “scichart/Charting/Themes/SciChartJSLightTheme”;
import { NumericAxis } from “scichart/Charting/Visuals/Axis/NumericAxis”;
import { EllipsePointMarker } from “scichart/Charting/Visuals/PointMarkers/EllipsePointMarker”;
import { FastLineRenderableSeries } from “scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries”;
import { NumberRange } from “scichart/Core/NumberRange”;
import { EAxisAlignment } from “scichart/types/AxisAlignment”;
import { ELabelAlignment } from “scichart/types/LabelAlignment”;
import { SciChartSurface } from “scichart”;
import {RubberBandXyZoomModifier} from “scichart/Charting/ChartModifiers/RubberBandXyZoomModifier”;
import {MouseWheelZoomModifier} from “scichart/Charting/ChartModifiers/MouseWheelZoomModifier”;
import {ZoomExtentsModifier} from “scichart/Charting/ChartModifiers/ZoomExtentsModifier”;
import { TextLabelProvider } from “scichart/Charting/Visuals/Axis/LabelProvider/TextLabelProvider”;
import { Thickness } from “scichart/Core/Thickness”;

const dataData = [
“2022-12-21 13:12:45”,
“2022-12-21 12:22:46”,
“2022-12-21 11:32:47”,
“2022-12-21 10:42:41”,
“2022-12-21 09:52:38”,
“2022-12-21 09:02:32”,
“2022-12-21 08:12:28”,
“2022-12-21 07:22:26”,
“2022-12-21 06:32:26”,
“2022-12-21 02:32:17”,
“2022-12-21 01:42:20”,
“2022-12-21 00:52:12”,
“2022-12-21 00:02:15”,
“2022-12-20 23:12:15”,
“2022-12-20 22:22:17”,
“2022-12-20 21:32:44”,
“2022-12-20 20:42:41”,
“2022-12-20 19:52:43”,
“2022-12-20 19:02:42”,
“2022-12-20 18:12:44”,
“2022-12-20 17:22:42”,
“2022-12-20 16:32:37”,
“2022-12-20 15:42:34”,
“2022-12-20 14:52:34”,
“2022-12-20 14:02:35”,
“2022-12-20 13:12:29”,
“2022-12-20 12:24:37”,
“2022-12-20 10:42:37”,
“2022-12-20 09:52:37”,
“2022-12-20 09:02:19”,
“2022-12-20 04:52:00”,
“2022-12-20 04:02:29”,
“2022-12-20 03:12:29”,
“2022-12-20 02:22:30”,
“2022-12-20 01:32:31”,
“2022-12-20 00:42:25”
];
const divElementId = “scichart-root”;
const drawExample = async () => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
const xAxis = new NumericAxis(wasmContext);
const labelProvider = new TextLabelProvider({
// When passed as an array, labels will be used in order
labels: dataData,
maxLength: 188
});
xAxis.labelProvider = labelProvider;
xAxis.labelStyle.alignment = ELabelAlignment.Center;
xAxis.labelStyle.padding = new Thickness(2, 1, 2, 1);
xAxis.axisRenderer.hideOverlappingLabels = false;
xAxis.axisRenderer.keepLabelsWithinAxis = false;
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(
new NumericAxis(wasmContext, {
growBy: new NumberRange(0.05, 0.05),
id: EAxisAlignment.Left.toString(),
axisAlignment: EAxisAlignment.Left,
labelPrecision: 0,
labelStyle: { alignment: ELabelAlignment.Left }
})
);
sciChartSurface.yAxes.add(
new NumericAxis(wasmContext, {
growBy: new NumberRange(0.05, 0.05),
id: EAxisAlignment.Right.toString(),
axisAlignment: EAxisAlignment.Right,
labelPrecision: 0,
labelStyle: { alignment: ELabelAlignment.Right }
})
);
sciChartSurface.applyTheme(new SciChartJSLightTheme());
sciChartSurface.chartModifiers.add(new SeriesSelectionModifier({ enableHover: true, enableSelection: true }));

const seriesCount = 3;
const seriesPointCount = dataData.length-1;

const s = sciChartSurface.suspendUpdates();
const xValues=Array.from(Array(dataData.length), (v,k) =>++k);
for (let i = 0; i < 5; i++) {
const alignment = i % 2 === 0 ? EAxisAlignment.Left : EAxisAlignment.Right;
const yValues=Array.from(Array(dataData.length), () =>Math.floor(Math.random()*100)/100);
const lineSeries = new FastLineRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, { xValues, yValues, dataSeriesName: “Series ” + i }),
strokeThickness: 2,
stroke: “Blue”,
opacity: 0.5,
yAxisId: alignment.toString(),
onSelectedChanged: (sourceSeries, isSelected) => {
sourceSeries.strokeThickness = isSelected ? 5 : 2;
sourceSeries.stroke = isSelected ? “Purple” : “Blue”;
sourceSeries.rolloverModifierProps.tooltipDataTemplate=isSelected ? “wezisadasdasdd” : ”;
sourceSeries.pointMarker = isSelected
? new EllipsePointMarker(wasmContext, {
width: 9,
height: 9,
strokeThickness: 1,
stroke: “White”,
fill: “Purple”
})
: undefined;
},
onHoveredChanged: (sourceSeries, isHovered) => {
sourceSeries.opacity = isHovered ? 1.0 : 0.7;
sourceSeries.strokeThickness = isHovered ? 2 : 1;
}
});
sciChartSurface.renderableSeries.add(lineSeries);
}
s.resume();
const mouseWheelZoomModifier = new MouseWheelZoomModifier();
const rubberBandZoomModifier = new RubberBandXyZoomModifier();
const zoomExtentsModifier = new ZoomExtentsModifier();
sciChartSurface.chartModifiers.add(zoomExtentsModifier);
// sciChartSurface.chartModifiers.add(rubberBandZoomModifier);
sciChartSurface.chartModifiers.add(mouseWheelZoomModifier);
return { sciChartSurface, wasmContext };
};

drawExample();

Version
2.2.2415
  • Andrew Burnett-Thompson
    Hi there, please use the Code button on your forum question to format code correctly. If you suspect a bug, why not submit via https://www.codesandbox.io/ (its like JS Fiddle but handles npm packages)? Our engineers will be able to debug and provide a solution very quickly. You also need to provide a clearer description of expected vs. actual behaviour. Images would help
  • You must to post comments
Showing 0 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