Point maker issues on LineSeries

[hecto932]

Hello guys,

I'm working with Charts in both the orientations (horizontal and vertical by default), but I'm getting this weird behavior with the point makers on vertical mode.

Here are my initial settings to draw the sci chart surface

const draw = async (divElem: string, orientation: string = 'vertical', columns: Array<string> = [], data: Array<any> = []) => {

  SciChartSurface.setRuntimeLicenseKey(apiKey);

  const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElem);

  const xAxis = new NumericAxis(wasmContext);
  const yAxis = new NumericAxis(wasmContext);

  xAxis.labelProvider.formatLabel = formatAxis;
  yAxis.labelProvider.formatLabel = numberToFix;

  // SET VERTICAL ORIENTATION BY DEFAULT
  xAxis.axisAlignment = EAxisAlignment.Left;
  yAxis.axisAlignment = EAxisAlignment.Bottom;

  // An axis may be optionally flipped using flippedCoordinates property
  yAxis.flippedCoordinates = true;

  // ADDING AXES TO SURFACE
  sciChartSurface.xAxes.add(xAxis);
  sciChartSurface.yAxes.add(yAxis);

  return { sciChartSurface, wasmContext };
};

Here are my settings for each line serie

const xyDataSeries = new XyDataSeries(wasmContext);
xyDataSeries.dataSeriesName = columnName;
const lineSeries = new FastLineRenderableSeries(wasmContext, {
  stroke: randomColor(),
  strokeThickness: 3,
  dataSeries: xyDataSeries,
  pointMarker: new EllipsePointMarker(wasmContext, {
    width: 5,
    height: 5,
    strokeThickness: 2,
    fill: 'white',
    stroke: 'white',
  }),
});

Do you have any idea about what I'm doing wrong when I'm switching between both orientations?

Can you provide me with some examples to have the Point markers for a line serie on Vertical Mode?

[andyb1979]

Hey Hector

It might be a bug. Is that code above enough to reproduce the problem in full?

On Wed, 6 Jan 2021 at 17:58, Hector Jose Flores Colmenarez < notifications@github.com> wrote:

Hello guys,

I'm working with Charts in both the orientations (horizontal and vertical by default), but I'm getting this weird behavior with the point makers on vertical mode.

[image: image] https://user-images.githubusercontent.com/5354758/103802886-10b49880-500d-11eb-9c78-dbd9554463e9.png

Here are my initial settings to draw the sci chart surface

const draw = async (divElem: string, orientation: string = 'vertical', columns: Array = [], data: Array = []) => {

SciChartSurface.setRuntimeLicenseKey(apiKey);

const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElem);

const xAxis = new NumericAxis(wasmContext); const yAxis = new NumericAxis(wasmContext);

xAxis.labelProvider.formatLabel = formatAxis; yAxis.labelProvider.formatLabel = numberToFix;

// SET VERTICAL ORIENTATION BY DEFAULT xAxis.axisAlignment = EAxisAlignment.Left; yAxis.axisAlignment = EAxisAlignment.Bottom;

// An axis may be optionally flipped using flippedCoordinates property yAxis.flippedCoordinates = true;

// ADDING AXES TO SURFACE sciChartSurface.xAxes.add(xAxis); sciChartSurface.yAxes.add(yAxis);

return { sciChartSurface, wasmContext }; };

Here are my settings for each line serie

const xyDataSeries = new XyDataSeries(wasmContext); xyDataSeries.dataSeriesName = columnName; const lineSeries = new FastLineRenderableSeries(wasmContext, { stroke: randomColor(), strokeThickness: 3, dataSeries: xyDataSeries, pointMarker: new EllipsePointMarker(wasmContext, { width: 5, height: 5, strokeThickness: 2, fill: 'white', stroke: 'white', }), });

Do you have any idea about what I'm doing wrong when I'm switching between both orientations?

Can you provide me with some examples to have the Point markers for a line serie on Vertical Mode?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ABTSoftware/SciChart.JS.Examples/issues/26, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADLEDVLU7PTIJNUSYIKTKP3SYSQDLANCNFSM4VX3ZQNA .

[hecto932]

Hey @andyb1979, thanks for your response.

Yes, that was what I thought.

It might be enough to reproduce the problem

(Horizontal mode)

Here is my full code to add line series

const addLineDataSeries = (sciChartSurface: SciChartSurface, wasmContext: TSciChart, data: Array<any>, deletePreviousData: boolean = false) => {
    if (columns.length && data.length) {
      // This remove the previous data and allows create a new rendableSerie
      if (deletePreviousData) {
        const rendableSeries = sciChartSurface.renderableSeries;
        if (rendableSeries.size()) {
          sciChartSurface.renderableSeries.clear();
        }
      }

      columns.forEach((columnName: string, index: number) => {
        const xyDataSeries = new XyDataSeries(wasmContext);
        xyDataSeries.dataSeriesName = columnName;
        const lineSeries = new FastLineRenderableSeries(wasmContext, {
          stroke: randomColor(),
          strokeThickness: 3,
          dataSeries: xyDataSeries,
          pointMarker: new EllipsePointMarker(wasmContext, {
            width: 5,
            height: 5,
            strokeThickness: 2,
            fill: 'white',
            stroke: 'white',
          }),
        });
        xyDataSeries.appendRange(data[index].map((item: any) => item.dts), data[index].map((item: any) => item[columnName]));
        sciChartSurface.renderableSeries.add(lineSeries);
      });
    }
  };

Do you need anything else?

[klishevich]

Hi @hecto932 We had a fix for this issue. Please make sure you are using the latest SciChart.js version 1.1.1362. If this does not help, please provide the full code including columns and data information!

[hecto932]

Awesome guys!

Now, it's working :)