Skip to main content

API

render​

Description​

Render data on the chart. You can determine whether to redraw the chart or append data to the exisiting chart with append property. You can also draw data that exceeds the maximum value of y-axis by using the drawOutOfRange property. In this case, it will be drawn on the y-axis maximum.

Interface​

render(data: ScatterDataType[], { append = false, drawOutOfRange = false } = {}) => void;

ScatterDataType​

type ScatterDataType {
  x: number;
  y: number;
  type?: string;
  hidden?: boolean; // whether or not to render. If not given, it will be rendered.
}

Usage​

SC.render(data);
SC.render(data, { append: true });
SC.render(data, { drawOutOfRange: true });

on​

Description​

Bind events and handler. We provide click | dragEnd | clickLegend | resize events.

click​

Occurs when clicking in the chart area.

Interface​

on('click', (event: MouseEvent, { x, y }))=> void;

Usage​

SC.on('click', (event, { x, y }) => {
  console.log('clicked! ', x, y);
});

dragEnd​

Occurs when dragging in the chart area.

Interface​

on('dragEnd', (event: MouseEvent, { x1, y1, x2, y2 }))=> void;

Usage​

SC.on('dragEnd', (event, { x1, y1, x2, y2 }) => {
  console.log('start ', x1, y1);
  console.log('end ', x2, y2);
})

clickLegend​

Occurs when clicking in the legend area.

Interface​

on('clickLegend', (event: MouseEvent, { checked: string[] }))=> void;

Usage​

SC.on('clickLegend', (event, { checked }) => {
  console.log('checked data types: ', checked);
  // checked data types: ['success', 'fail']
})

resize​

Occurs when resize() method called

Interface​

on('resize', (event: string, { width: number, height: number }))=> void;

Usage​

SC.on('resize', (event, { width, height }) => {
  console.log('resized width: ', width);
  console.log('resized height: ', height);
})

off​

Description​

Remove the event listener you added.

Interface​

off(eventType: string) => void;

Usage​

SC.off('click');
SC.off('dragEnd');
SC.off('resize');

resize​

Description​

Reset width and height.

Interface​

resize(width?: number, height:? number) => void;

Usage​

SC.resize();
SC.resize(900, 450);

setOption​

Description​

Reset the options.

Interface​

setOption({
  axis?: { 
    x?: Partial<AxisOption>, 
    y?: Partial<AxisOption>,
  },
  render?: RenderOption
}) => void;

Usage​

SC.setOption({
  axis: {
    x: { min: Number(min), max: Number(max) }
  },
  render: {
    drawOutOfRange: true,
  }
});

getOption​

Description​

Returns the options.

Interface​

getOption() => ScatterChartOption;

Usage​

SC.getOption();

toBase64Image​

Description​

Convert canvas into base64 data URL

Interface​

toBase64Image() => Promise<string>

Usage​

const imageSrc = SC.toBase64Image();

startRealtime​

Description​

Start reatltime mode

Interface​

startRealtime(duration: number) => void

Usage​

SC.startRealtime(to - from);
SC.startRealtime(60000);

stopRealtime​

Description​

Stop reatltime mode

Interface​

stopRealtime() => void

Usage​

SC.stopRealtime();

clear​

Description​

Clear all data

Interface​

clear() => void

Usage​

SC.clear();

destroy​

Description​

Unregisters all events that have been registered and removes the rendered elements.

Interface​

destroy() => void

Usage​

SC.destroy();

isRealtime​

Description​

Getter that returns a boolean value indicating whether the current chart is in realtime mode.

Interface​

(getter) ScatterChart.isRealtime: boolean

Usage​

SC.isRealtime;