Pre loader

Why are tooltip annotation rollover data labels offset?

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

0
0

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();

    };
Version
3.5.687
Images
  • Andrew Burnett-Thompson
    hey, when posting questions if you press the Code button (has 01 01 as the icon) it will format your code really nicely.
  • Anthony Leung
    thanks – have done so
  • You must to post comments
Showing 0 results
Your Answer

Please first to submit.