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 2 weeks ago
- last edited 2 weeks 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
- You must login to post comments
Please login first to submit.