The chart works ok on date data. But I have weekly data, e.g.
xValues is set to x
yValues is set to y
xl is not used for drawing the chart.
I then get a tooltip that is out of sync with the x axis (see pic).
"a": {
"x": [
1,
2,
3,
4,
5,
6,
7
],
"xl": [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
"Sun"
],
"y": [
46.8235294117647,
48.0,
49.34285714285714,
45.05714285714286,
42.114285714285714,
39.55882352941177,
40.970588235294116
]
},
My chart code
const initSciChart = async(series_id, target_element_id, xValues, yValues, zoomOn = false, labels = null) =& gt; {
// Initialize SciChartSurface. Don't forget to await!
const { sciChartSurface, wasmContext } = await SciChartSurface.create(target_element_id, {
theme: new SciChartJsNavyTheme(),
title: series_id,
titleStyle: { fontSize: 22 }
});
// Create an XAxis and YAxis with growBy padding
const growBy = new NumberRange(0.1, 0.1);
let labelProvider = new SmartDateLabelProvider();
if (labels) {
console.log('setting labels');
labelProvider = new TextLabelProvider({
// When passed as an array, labels will be used in order
labels: labels,
});
}
}
const xAxesOptions = {
//axisTitle: "Time",
maxAutoTicks: 10,
minorsPerMajor: 2,
drawMajorGridLines: true,
drawMinorGridLines: true,
axisAlignment: EAxisAlignment.Bottom,
labelProvider: labelProvider,
growBy,
labelStyle: {
alignment: ELabelAlignment.Center, // Auto,
fontFamily: "Arial",
fontSize: 16,
color: "White",
}, // type TTextStyle
};
sciChartSurface.xAxes.add(new CategoryAxis(wasmContext, xAxesOptions));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
//axisTitle: "Counts",
axisAlignment: EAxisAlignment.Right,
autoRange: EAutoRange.Alwags,
growBy
}));
// allow zooming in the x direction
if (zoomOn) {
sciChartSurface.chartModifiers.add(
new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }),
new ZoomPanModifier(),
new ZoomExtentsModifier(),
);
}
// Create a line series with some initial data
let lineSeries = new FastLineRenderableSeries(wasmContext, {
stroke: "steelblue",
strokeThickness: 3,
dataSeries: new XyDataSeries(wasmContext, {
//xValues: [0,1,2,3,4,5,6,7,8,9],
//yValues: [0, 0.0998, 0.1986, 0.2955, 0.3894, 0.4794, 0.5646, 0.6442, 0.7173, 0.7833]
xValues: xValues,
yValues: yValues,
dataIsSortedInX: true,
//dataEvenlySpacedInX: true,
//containsNaN: false
}),
pointMarker: new EllipsePointMarker(wasmContext, { width: 11, height: 11, fill: "#fff" }),
});
lineSeries.rolloverModifierProps.tooltipLabelX = 'Date';
lineSeries.rolloverModifierProps.tooltipLabelY = '';
sciChartSurface.renderableSeries.add(lineSeries);
// Add RolloverModifier behavior
sciChartSurface.chartModifiers.add(new RolloverModifier());
//sciChartSurface.useCommunityLicense();
};
- Anthony Leung asked 5 months ago
- last edited 5 months ago
- hey, when posting questions if you press the Code button (has 01 01 as the icon) it will format your code really nicely.
- thanks – have done so
- Hello, sorry for the late response. Currently, I’m not sure what is the best approach here. We’ll look into it. To better understand the requirement, let us know what is the use case(e.g. range of the data, its format, etc..) and whether you have checked and tried other axis types: https://www.scichart.com/documentation/js/current/webframe.html#Axis%20Label%20Formatting%20-%20LabelProvider%20API.html
- You must login to post comments
Hello, we have looked at the issue closer and logged it as a bug:
https://abtsoftware.myjetbrains.com/youtrack/issue/SCJS-1855/Rollover-data-labels-offset
We will post an udpate here when it is resolved.
- Jim Risen answered 5 months ago
- You must login to post comments
Please login first to submit.