Chart Scatter
Scatter charts are a type of chart used to visualize the relationship between two numerical variables by displaying data points on a two-dimensional coordinate system.
| Type | Resource |
|---|---|
| Design | Figma |
| Web | Web Storybook |
| Code | Gitlab |
Usage
import { ScatterChart } from 'bio-bind-ui';<ScatterChart
data={{
datasets: [
{
backgroundColor: '#008AA0',
borderWidth: 0,
data: [
{
x: 0.9,
y: 890,
},
{
x: 3.1,
y: 890,
},
{
x: 4.2,
y: 500,
},
{
x: 6,
y: 750,
},
{
x: 8,
y: 500,
},
{
x: 9,
y: 890,
},
],
fill: true,
label: 'Data 1',
pointRadius: 8,
pointStyle: 'circle',
},
{
backgroundColor: '#FF6E00',
borderWidth: 0,
data: [
{
x: 0.9,
y: 600,
},
{
x: 2,
y: 500,
},
{
x: 4.2,
y: 600,
},
{
x: 5.5,
y: 100,
},
{
x: 5.5,
y: 890,
},
{
x: 6.8,
y: 390,
},
{
x: 8,
y: 750,
},
{
x: 9,
y: 390,
},
{
x: 9,
y: 600,
},
],
fill: true,
label: 'Data 2',
pointRadius: 8,
pointStyle: 'triangle',
},
{
backgroundColor: '#1570EF',
borderWidth: 0,
data: [
{
x: 2,
y: 600,
},
{
x: 2,
y: 100,
},
{
x: 3.1,
y: 100,
},
{
x: 4.2,
y: 390,
},
{
x: 8,
y: 100,
},
{
x: 9,
y: 500,
},
{
x: 10.2,
y: 100,
},
],
fill: true,
label: 'Data 3',
pointRadius: 8,
pointStyle: 'rect',
},
],
}}
id='scatter-chart'
mode='light'
name='Scatter Chart Horizontal Legend'
options={{
plugins: {
legend: {
align: 'center',
position: 'top',
},
},
scales: {
x: {
min: 0,
ticks: {
stepSize: 1,
},
},
y: {
max: 1000,
min: 0,
},
},
}}
size='sm'
width={0}
/>Examples (optional)
Size
Use the size sm, md, or lg to change the size of the scatter chart.
Mode (optional)
Use the mode light or dark to change the mode of the scatter chart.
Props
| Props | Required | Default | Type | description |
|---|---|---|---|---|
| id | true | - | string | A unique identifier for the scatter chart. |
| name | true | - | string | Name prop is commonly used in form elements, such as scatter chart. |
| data | false | - | ChartData<'scatter'> | The data object required by Chart.js to render the scatter chart. It includes labels for the x-axis and datasets containing the values and styles for the scatter. |
| option | false | - | ChartOptions<'scatter'> | Optional configuration options for the scatter chart. These options control the chart behavior, responsiveness, and appearance. |
| mode | false | light | light dark | The theme mode of the scatter chart (light or dark). |
| size | true | md | sm md lg | The size of the scatter chart. |
| width | false | - | number | Value information from the width of the scatter chart. |
| height | false | - | number | Value information from the height of the scatter chart. |