Scatter Chart in React Chart

17 Aug 202624 minutes to read

Scatter

Follow these steps to render a scatter series, which displays individual data points across a numeric x/y plane.

Set the series type: Set the series type to Scatter in the series configuration. Both xName and yName must map to numeric values.
Inject the ScatterSeries module: Add ScatterSeries to the services array of the Inject component inside ChartComponent. This registers the functionality required to render a scatter series.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries } from '@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';
function App() {
    const primaryxAxis = {
        title: 'Height (cm)', minimum: 130, maximum: 180,
        edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
    };
    const primaryyAxis = {
        title: 'Weight (kg)', minimum: 30, maximum: 100,
        labelFormat: '{value}kg', rangePadding: 'None'
    };
    const marker = { width: 15, height: 15 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='male' name='Male' type='Scatter' marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='female' name='Female' type='Scatter' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, ScatterSeries, Marker}
from'@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';

function App() {
  const primaryxAxis: AxisModel = {
    title: 'Height (cm)', minimum: 130, maximum: 180,
    edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
  };
  const primaryyAxis: AxisModel = {
    title: 'Weight (kg)', minimum: 30, maximum: 100,
    labelFormat: '{value}kg', rangePadding: 'None'
  };
  const marker = { width: 15, height: 15 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='male' name='Male' type='Scatter'
          marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='female' name='Female' type='Scatter'
          marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let scatterData = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: 52, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: 75, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];
export let scatterData: Object[] = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: 52, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: 75, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];

Binding data with series

You can bind data to the chart using the dataSource property within the series configuration. This allows you to connect a JSON dataset or remote data to your chart. To display the data correctly, map the numeric x field to xName and the numeric y field to yName.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries } from '@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';
function App() {
    const primaryxAxis = {
        title: 'Height (cm)', minimum: 130, maximum: 180,
        edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
    };
    const primaryyAxis = {
        title: 'Weight (kg)', minimum: 30, maximum: 100,
        labelFormat: '{value}kg', rangePadding: 'None'
    };
    const marker = { width: 15, height: 15 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='male' name='Male' type='Scatter' marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='female' name='Female' type='Scatter' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, ScatterSeries, Marker}
from'@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';

function App() {
  const primaryxAxis: AxisModel = {
    title: 'Height (cm)', minimum: 130, maximum: 180,
    edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
  };
  const primaryyAxis: AxisModel = {
    title: 'Weight (kg)', minimum: 30, maximum: 100,
    labelFormat: '{value}kg', rangePadding: 'None'
  };
  const marker = { width: 15, height: 15 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='male' name='Male' type='Scatter'
          marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='female' name='Female' type='Scatter'
          marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let scatterData = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: 52, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: 75, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];
export let scatterData: Object[] = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: 52, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: 75, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];

Series customization

Customize the scatter markers with the following properties. Scatters are marker-only series, so per-series fill and shape styling are configured on the marker object passed to the series; fill colors the marker body and shape selects the glyph. Defaults are taken from the standard Series and MarkerSettingsModel models.

Property	Where	Type	Default	Description
`fill`	series	string	`null`	Color applied to the marker body.
`opacity`	series	number	`1`	Transparency of the marker (0 to 1).
`marker.shape`	`marker`	`ChartShape`	`'Circle'`	Marker glyph. Values: `Circle`, `Rectangle`, `Triangle`, `Diamond`, `Cross`, `HorizontalLine`, `VerticalLine`, `Pentagon`, `InvertedTriangle`, `Star`, etc.
`marker.width`	`marker`	number	`5`	Marker width, in pixels.
`marker.height`	`marker`	number	`5`	Marker height, in pixels.

Fill

The fill property sets the color of the marker body.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries } from '@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';

function App() {
    const primaryxAxis = {
        title: 'Height (cm)', minimum: 130, maximum: 180,
        edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
    };
    const primaryyAxis = {
        title: 'Weight (kg)', minimum: 30, maximum: 100,
        labelFormat: '{value}kg', rangePadding: 'None'
    };
    const marker1 = { width: 10, height: 10, shape: 'Triangle' };
    const marker = { width: 12, height: 12, shape: 'Rectangle'};
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={scatterData} xName='height' yName='male' type='Scatter' fill='red'
          marker={marker1}>
        </SeriesDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='female' type='Scatter' fill='yellow'
          marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, ScatterSeries, Marker}
from'@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';

function App() {
  const primaryxAxis: AxisModel = {
    title: 'Height (cm)', minimum: 130, maximum: 180,
    edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
  };
  const primaryyAxis: AxisModel = {
    title: 'Weight (kg)', minimum: 30, maximum: 100,
    labelFormat: '{value}kg', rangePadding: 'None'
  };
  const marker1 = { width: 10, height: 10, shape: 'Triangle' };
  const marker = { width: 12, height: 12, shape: 'Rectangle'};

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='male' type='Scatter' fill='red'
          marker={marker1}>
        </SeriesDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='female' type='Scatter' fill='yellow'
          marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let scatterData = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: 52, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: 75, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];
export let scatterData: Object[] = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: 52, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: 75, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];

Opacity

The opacity property controls the transparency of the markers and affects how the series blends with background or overlapping points.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries } from '@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';

function App() {
    const primaryxAxis = {
        title: 'Height (cm)', minimum: 130, maximum: 180,
        edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
    };
    const primaryyAxis = {
        title: 'Weight (kg)', minimum: 30, maximum: 100,
        labelFormat: '{value}kg', rangePadding: 'None'
    };
    const marker1 = { width: 10, height: 10, shape: 'Triangle' };
    const marker = { width: 12, height: 12, shape: 'Rectangle'};
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={scatterData} xName='height' yName='male' type='Scatter' opacity={0.4}
          marker={marker1}>
        </SeriesDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='female' type='Scatter' opacity={0.4}
          marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, ScatterSeries, Marker}
from'@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';

function App() {
  const primaryxAxis: AxisModel = {
    title: 'Height (cm)', minimum: 130, maximum: 180,
    edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
  };
  const primaryyAxis: AxisModel = {
    title: 'Weight (kg)', minimum: 30, maximum: 100,
    labelFormat: '{value}kg', rangePadding: 'None'
  };
  const marker1 = { width: 10, height: 10, shape: 'Triangle' };
  const marker = { width: 12, height: 12, shape: 'Rectangle'};

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='male' type='Scatter' opacity={0.4}
          marker={marker1}>
        </SeriesDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='female' type='Scatter' opacity={0.4}
          marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let scatterData = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: 52, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: 75, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];
export let scatterData: Object[] = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: 52, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: 75, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];

Shape

The marker.shape property selects the marker glyph. Available values include Circle, Rectangle, Triangle, Diamond, Cross, HorizontalLine, VerticalLine, Pentagon, InvertedTriangle, and Star.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries } from '@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';

function App() {
    const primaryxAxis = {
        title: 'Height (cm)', minimum: 130, maximum: 180,
        edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
    };
    const primaryyAxis = {
        title: 'Weight (kg)', minimum: 30, maximum: 100,
        labelFormat: '{value}kg', rangePadding: 'None'
    };
    const marker1 = { width: 10, height: 10, shape: 'Star' };
    const marker = { width: 12, height: 12, shape: 'Circle'};
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={scatterData} xName='height' yName='male' type='Scatter'
          marker={marker1}>
        </SeriesDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='female' type='Scatter'
          marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, ScatterSeries, Marker}
from'@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';

function App() {
  const primaryxAxis: AxisModel = {
    title: 'Height (cm)', minimum: 130, maximum: 180,
    edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
  };
  const primaryyAxis: AxisModel = {
    title: 'Weight (kg)', minimum: 30, maximum: 100,
    labelFormat: '{value}kg', rangePadding: 'None'
  };
  const marker1 = { width: 10, height: 10, shape: 'Star' };
  const marker = { width: 12, height: 12, shape: 'Circle'};

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='male' type='Scatter' opacity={0.4}
          marker={marker1}>
        </SeriesDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='female' type='Scatter' opacity={0.4}
          marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let scatterData = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: 52, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: 75, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];
export let scatterData: Object[] = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: 52, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: 75, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];

Empty points

Data points with null or undefined values are considered empty. By default (mode: 'Gap'), empty points are ignored; the mode property lets you change how they are handled.

Mode

Use the mode property to control handling of empty points. Available modes: Gap, Drop, Zero, Average. The default mode is Gap.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries } from '@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';

function App() {
    const primaryxAxis = {
        title: 'Height (cm)', minimum: 130, maximum: 180,
        edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
    };
    const primaryyAxis = {
        title: 'Weight (kg)', minimum: 30, maximum: 100,
        labelFormat: '{value}kg', rangePadding: 'None'
    };
    const marker1 = { width: 10, height: 10 };
    const emptyPoint = { mode: 'Gap'};
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={scatterData} xName='height' yName='male' type='Scatter'
          marker={marker1} emptyPointSettings={emptyPoint}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, ScatterSeries, Marker}
from'@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';

function App() {
  const primaryxAxis: AxisModel = {
    title: 'Height (cm)', minimum: 130, maximum: 180,
    edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
  };
  const primaryyAxis: AxisModel = {
    title: 'Weight (kg)', minimum: 30, maximum: 100,
    labelFormat: '{value}kg', rangePadding: 'None'
  };
  const marker1 = { width: 10, height: 10};
  const emptyPoint = { mode: 'Gap'};
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='male' type='Scatter'
          marker={marker1} emptyPointSettings={emptyPoint}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let scatterData = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: null, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: undefined, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];
export let scatterData: Object[] = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: null, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: undefined, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];

Fill

Use the fill property to set the fill color for empty points.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries } from '@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';

function App() {
    const primaryxAxis = {
        title: 'Height (cm)', minimum: 130, maximum: 180,
        edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
    };
    const primaryyAxis = {
        title: 'Weight (kg)', minimum: 30, maximum: 100,
        labelFormat: '{value}kg', rangePadding: 'None'
    };
    const marker1 = { width: 10, height: 10 };
    const emptyPoint = { mode: 'Average', fill: 'red'};
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={scatterData} xName='height' yName='male' type='Scatter'
          marker={marker1} emptyPointSettings={emptyPoint}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, ScatterSeries, Marker}
from'@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';

function App() {
  const primaryxAxis: AxisModel = {
    title: 'Height (cm)', minimum: 130, maximum: 180,
    edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
  };
  const primaryyAxis: AxisModel = {
    title: 'Weight (kg)', minimum: 30, maximum: 100,
    labelFormat: '{value}kg', rangePadding: 'None'
  };
  const marker1 = { width: 10, height: 10};
  const emptyPoint = { mode: 'Average', fill: 'red'};
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='male' type='Scatter' 
          marker={marker1} emptyPointSettings={emptyPoint}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let scatterData = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: null, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: undefined, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];
export let scatterData: Object[] = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: null, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: undefined, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];

Border

Use the border property to customize the border width and color for empty points.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries } from '@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';

function App() {
    const primaryxAxis = {
        title: 'Height (cm)', minimum: 130, maximum: 180,
        edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
    };
    const primaryyAxis = {
        title: 'Weight (kg)', minimum: 30, maximum: 100,
        labelFormat: '{value}kg', rangePadding: 'None'
    };
    const marker1 = { width: 10, height: 10 };
    const emptyPoint = { mode: 'Average', fill: 'red', border: {width:1.5, color: 'green'}};
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={scatterData} xName='height' yName='male' type='Scatter'
          marker={marker1} emptyPointSettings={emptyPoint}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, ScatterSeries, Marker}
from'@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';

function App() {
  const primaryxAxis: AxisModel = {
    title: 'Height (cm)', minimum: 130, maximum: 180,
    edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
  };
  const primaryyAxis: AxisModel = {
    title: 'Weight (kg)', minimum: 30, maximum: 100,
    labelFormat: '{value}kg', rangePadding: 'None'
  };
  const marker1 = { width: 10, height: 10};
  const emptyPoint = {  mode: 'Average', fill: 'red', border: {width:1.5, color: 'green'}};
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Height Vs Weight'>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='male' type='Scatter' 
          marker={marker1} emptyPointSettings={emptyPoint}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let scatterData = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: null, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: undefined, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];
export let scatterData: Object[] = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: null, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: undefined, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];

Events

Series render

The seriesRender event fires before each series is rendered and lets you modify series properties such as data, fill, or marker shape. For a scatter series, use it to swap marker properties per render or to swap data sources on the fly.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries } from '@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';

function App() {
    const primaryxAxis = {
        title: 'Height (cm)', minimum: 130, maximum: 180,
        edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
    };
    const primaryyAxis = {
        title: 'Weight (kg)', minimum: 30, maximum: 100,
        labelFormat: '{value}kg', rangePadding: 'None'
    };
    const marker1 = { width: 10, height: 10 };
    const seriesRender = (args) => {
      args.fill = '#ff6347';
  }
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Height Vs Weight' seriesRender={seriesRender}>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={scatterData} xName='height' yName='male' type='Scatter'
          marker={marker1} >
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, ScatterSeries, ISeriesRenderEventArgs}
from'@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';

function App() {
  const primaryxAxis: AxisModel = {
    title: 'Height (cm)', minimum: 130, maximum: 180,
    edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
  };
  const primaryyAxis: AxisModel = {
    title: 'Weight (kg)', minimum: 30, maximum: 100,
    labelFormat: '{value}kg', rangePadding: 'None'
  };
  const marker1 = { width: 10, height: 10};
  const seriesRender = (args: ISeriesRenderEventArgs) => {
    args.fill = '#ff6347';
}
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Height Vs Weight' seriesRender={seriesRender}>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='male' type='Scatter' 
          marker={marker1}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let scatterData = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: 52, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: 75, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];
export let scatterData: Object[] = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: 52, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: 75, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];

Point render

The pointRender event fires before each data point is drawn, letting you customize per-point marker shape, border, or fill. For a scatter series, use it to vary marker shape or color by data point.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries } from '@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';

function App() {
    const primaryxAxis = {
        title: 'Height (cm)', minimum: 130, maximum: 180,
        edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
    };
    const primaryyAxis = {
        title: 'Weight (kg)', minimum: 30, maximum: 100,
        labelFormat: '{value}kg', rangePadding: 'None'
    };
    const marker1 = { width: 10, height: 10 };
    const pointRender = (args) => {
      if (args.point.index % 2 !== 0) {
        args.fill = '#ff6347';
    }
    else {
        args.fill = '#009cb8';
    }
  }
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Height Vs Weight' pointRender={pointRender}>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={scatterData} xName='height' yName='male' type='Scatter'
          marker={marker1} >
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, ScatterSeries, IPointRenderEventArgs}
from'@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';

function App() {
  const primaryxAxis: AxisModel = {
    title: 'Height (cm)', minimum: 130, maximum: 180,
    edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
  };
  const primaryyAxis: AxisModel = {
    title: 'Weight (kg)', minimum: 30, maximum: 100,
    labelFormat: '{value}kg', rangePadding: 'None'
  };
  const marker1 = { width: 10, height: 10};
  const pointRender = (args: IPointRenderEventArgs) => {
    if (args.point.index % 2 !== 0) {
      args.fill = '#ff6347';
  }
  else {
      args.fill = '#009cb8';
  }
}
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Height Vs Weight' pointRender={pointRender}>
      <Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={scatterData} xName='height' yName='male' type='Scatter' 
          marker={marker1}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let scatterData = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: 52, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: 75, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];
export let scatterData: Object[] = [
    { height: 130, male: 35, female: 32 },
    { height: 132, male: 38, female: 33 },
    { height: 135, male: 41, female: 38 },
    { height: 137, male: 43, female: 40 },
    { height: 140, male: 45, female: 42 },
    { height: 142, male: 46, female: 42.5 },
    { height: 145, male: 48, female: 43 },
    { height: 147, male: 50, female: 44 },
    { height: 150, male: 52, female: 45 },
    { height: 152, male: 55, female: 45 },
    { height: 155, male: 58, female: 46 },
    { height: 157, male: 60, female: 48 },
    { height: 160, male: 63, female: 51 },
    { height: 162, male: 70, female: 54 },
    { height: 165, male: 75, female: 58 },
    { height: 167, male: 78, female: 62 },
    { height: 170, male: 82, female: 68 },
    { height: 172, male: 87, female: 72 },
    { height: 175, male: 89, female: 78 },
    { height: 177, male: 92, female: 82 },
    { height: 180, male: 95, female: 85 }
];

Search docs

Ask Syncfusion AI Assistant