XYPointChart

Live preview

Loading example…

Shared engine of ScatterChart and BubbleChart: two continuous axes, multi-series points, optional bubbles, trend lines and quadrants.

Import

import { XYPointChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/core.

Usage

<XYPointChart
  title="Duración del servicio vs. ticket"
  series={[
      { id: "corte", name: "Corte", points: visits(401, 40, 10, 0.75) },
      { id: "combo", name: "Corte + barba", points: visits(402, 30, 22, 0.9) },
    ]}
  yFormat="currency"
  xAxis={{ title: "Duración (min)" }}
  yAxis={{ title: "Ticket (S/)" }}
  trendLine={false}
  sized={false}
  radius={5}
  height={320}
  grid
  tooltip
  loading={false}
  animate
  labels={labels}
/>

Props

Prop	Type	Default	Description
`title` *	`string`
`series` *	`readonly XYSeries[]`
`xFormat`	`ValueFormat`
`yFormat`	`ValueFormat`
`sizeFormat`	`ValueFormat`
`xAxis`	`DistributionAxisOptions`
`yAxis`	`DistributionAxisOptions`
`trendLine`	`boolean`	`false`	Least-squares line per series, drawn over its x range.
`quadrants`	`QuadrantOptions`
`radius`	`number`	`5`	Point radius when there are no sizes (pixels).
`sized`	`boolean`	`false`	Bubble mode: radius from `size`, area-proportional, the largest gets `sizeRange[1]`.
`sizeRange`	`readonly [number, number]`	`[4, 30]`
`xType`	`"time" \| "linear"`	`"linear"`	“time”: `x` is epoch milliseconds and the axis shows calendar ticks.
`jitter`	`number \| { x?: number; y?: number; }`		Deterministic displacement in pixels that separates overlapping points (a number applies to both axes). Tooltips still show the true values.
`seed`	`number`	`17`	Seed of the jitter, so points are stable between renders.
`renderer`	`"canvas" \| "svg"`	`"svg"`	“canvas” paints the marks on a canvas for tens of thousands of points; axes, tooltip and keyboard stay SVG/HTML. Falls back to SVG when points carry images or `shading` is “shaded”.
`brush`	`XYBrush`		Rectangular brush over the plot (pointer drag plus keyboard).
`shading`	`"flat" \| "shaded"`	`"flat"`	“shaded” fills bubbles with an off-centre radial gradient so they read as spheres.
`showLabels`	`boolean`	`false`	Text labels next to (or inside) the points that have a `label`.
`sizeLegend`	`boolean`	`sized`	Reference circles explaining the bubble sizes, under the plot.
`height`	`number \| "fill"`	`340`
`aspectRatio`	`number`		Width / height ratio; sizes the drawing from the container width when `height` is not “fill”.
`legend`	`boolean \| "top" \| "bottom"`
`grid`	`boolean`	`true`
`tooltip`	`boolean`	`true`
`loading`	`boolean`
`animate`	`boolean`	`true`
`labels`	`Partial<DistributionLabels>`
`className`	`string`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/core/distribution/xy-points.tsx