Scatter plot data label position

[afarghaly10]

Hello I want to change the data label position on a scatter plot

// I have tried the following
const dataChartScatter = [
  { name: "Trade-Off Score", values: this.data.quadCat },
  {
    name: "red",
    values: this.data.redVals,
    labels: this.data.redLabels,
    dataLabelPosition: "t"
  },
  {
    name: "yellow",
    values: this.data.yellowVals,
    labels: this.data.yellowLabels,
    dataLabelPosition: "bestFit"
  },
  {
    name: "green",
    values: this.data.greenVals,
    labels: this.data.greenLabels,
    LabelPosition: "t"
  }
];

// and as well
this.currentSlide.addChart(this.currentPpt.charts.SCATTER, dataChartScatter, {
  x: 0.25,
  y: 1.0,
  w: "90%",
  h: "80%",
  lineDataSymbolSize: 11,
  lineSize: 0,
  showTitle: true,
  showLabel: true,
  dataLabelPosition: "bestFit"
});

[gitbrent]

Hi @afarghaly10

Thanks for reporting this - dataLabelPosition was not being set correctly for scatter charts, hence the labels were unpositionable.

Fixed in the master branch, example below.

var optsChartScat1 = {
  x:0.5, y:0.6, w:'45%', h:3,
  valAxisTitle        : "Renters",
  showValAxisTitle    : true,
  catAxisTitle        : "Last 6 Months",
  showCatAxisTitle    : true,
  showLabel           : true, // Must be set to true or labels will not be shown
  dataLabelPosition   : 'b', // Options: 't'|'b'|'l'|'r'|'ctr'
};
slide.addChart( pptx.charts.SCATTER, arrDataScatter1, optsChartScat1 );

[elezotte]

@gitbrent, I know this isn't quite the best place to ask this, but how do you plot scatter data-points that don't share x-axis values. From what I glean from the examples this always must be the case and I was thinking that pptxgenjs cannot do this, but @afarghaly10 screenshot suggests otherwise.

[gitbrent]

@elezotte - i'm not sure, plus the screenshot from afarghaly10 doesn't look like it's from PptxGenJS...

[pabadl]

@gitbrent, I know this isn't quite the best place to ask this, but how do you plot scatter data-points that don't share x-axis values. From what I glean from the examples this always must be the case and I was thinking that pptxgenjs cannot do this, but @afarghaly10 screenshot suggests otherwise.

Did you found any solution for your question?

[elezotte]

@pabadl, sort of. I did find a couple of ways around this limitation that are less than ideal.

The first involves layering charts, each with its own series of data:
https://codesandbox.io/s/pptxgenjs-scatter-graph-example-bsnvli

The second has only one chart, but ensures that each series has the same x-axis values, but hides the ones you don't need:
https://codesandbox.io/s/pptxgenjs-scatter-graph-example-v2-ezeqze