ScatterPlot

A scatter plot is a type of chart which displays dots to represent two numeric variables. This type of chart is used to determine the relationship between two variables.

Source Code

uikit-react-viz

Usage

This example shows a simple scatter plot with one data series.
Each dot represents a data point, and a tooltip appears on hover.

Set horizontalRangeSlider.show to true to add a range slider below the chart for zooming into specific data ranges.

<HvScatterPlot
  height={400}
  horizontalRangeSlider={{
    show: true,
  }}
  data={{
    y: Array.from(Array(500).keys()).map((i) => i * 0.001 + Math.random()),
    x: Array.from(Array(500).keys()).map((i) => i * 0.001 + Math.random()),
  }}
  groupBy="x"
  measures="y"
/>

<HvScatterPlot
  height={400}
  horizontalRangeSlider={{
    show: true,
  }}
  data={{
    y: Array.from(Array(500).keys()).map((i) => i * 0.001 + Math.random()),
    x: Array.from(Array(500).keys()).map((i) => i * 0.001 + Math.random()),
  }}
  groupBy="x"
  measures="y"
/>

Multiple plots with splitBy

Use the splitBy prop to create multiple plots within the same chart.
In this example, two countries each have 10 data points. splitBy is set to Country to display a separate plot for each one.

<HvScatterPlot
  height={400}
  data={{
    Country: [
      ...Array.from(Array(10)).map(() => "Portugal"),
      ...Array.from(Array(10)).map(() => "Spain"),
    ],
    Time: [
      ...Array.from(Array(10).keys()).map((i) =>
        new Date(
          new Date(new Date(0, 0, 0, 9, 0, 0)).setHours(
            new Date(0, 0, 0, 9, 0, 0).getHours() + i,
          ),
        ).getTime(),
      ),
      ...Array.from(Array(10).keys()).map((i) =>
        new Date(
          new Date(new Date(0, 0, 0, 9, 0, 0)).setHours(
            new Date(0, 0, 0, 9, 0, 0).getHours() + i,
          ),
        ).getTime(),
      ),
    ],
    Sales: [
      ...Array.from(Array(10)).map(() =>
        Math.floor(Math.random() * (5000 - 500 + 1) + 500),
      ),
      ...Array.from(Array(10)).map(() =>
        Math.floor(Math.random() * (5000 - 500 + 1) + 500),
      ),
    ],
  }}
  groupBy="Time"
  measures="Sales"
  splitBy="Country"
  yAxis={{
    name: "Number of Sales",
  }}
  xAxis={{ type: "time" }}
  tooltip={{
    titleFormatter: (x?: string | number) =>
      x ? `${new Date(x).toLocaleTimeString()}` : "",
  }}
/>

<HvScatterPlot
  height={400}
  data={{
    Country: [
      ...Array.from(Array(10)).map(() => "Portugal"),
      ...Array.from(Array(10)).map(() => "Spain"),
    ],
    Time: [
      ...Array.from(Array(10).keys()).map((i) =>
        new Date(
          new Date(new Date(0, 0, 0, 9, 0, 0)).setHours(
            new Date(0, 0, 0, 9, 0, 0).getHours() + i,
          ),
        ).getTime(),
      ),
      ...Array.from(Array(10).keys()).map((i) =>
        new Date(
          new Date(new Date(0, 0, 0, 9, 0, 0)).setHours(
            new Date(0, 0, 0, 9, 0, 0).getHours() + i,
          ),
        ).getTime(),
      ),
    ],
    Sales: [
      ...Array.from(Array(10)).map(() =>
        Math.floor(Math.random() * (5000 - 500 + 1) + 500),
      ),
      ...Array.from(Array(10)).map(() =>
        Math.floor(Math.random() * (5000 - 500 + 1) + 500),
      ),
    ],
  }}
  groupBy="Time"
  measures="Sales"
  splitBy="Country"
  yAxis={{
    name: "Number of Sales",
  }}
  xAxis={{ type: "time" }}
  tooltip={{
    titleFormatter: (x?: string | number) =>
      x ? `${new Date(x).toLocaleTimeString()}` : "",
  }}
/>

Multiple Y axes

To create a scatter plot with multiple Y axes, define the yAxis prop as an array of objects.
Each object must have a unique id and a name. Then, set the measures prop as an array, where each measure includes a yAxis field that matches one of the defined axis ids.

<HvScatterPlot
  height={400}
  data={{
    Humidity: [42, 46, 48, 50, 40, 35, 30, 22, 21, 12, 10, 15, 18, 22, 22],
    Temperature: [20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 38, 35, 30, 28],
    Time: Array.from(Array(15).keys()).map((i) =>
      new Date(
        new Date(new Date(0, 0, 0, 6, 0, 0)).setHours(
          new Date(0, 0, 0, 6, 0, 0).getHours() + i,
        ),
      ).getTime(),
    ),
  }}
  groupBy="Time"
  measures={[
    {
      yAxis: "temp",
      field: "Temperature",
      valueFormatter: (x?: string | number) => `${x}ºC`,
    },
    {
      yAxis: "humidity",
      field: "Humidity",
      valueFormatter: (x?: string | number) => `${x}%`,
    },
  ]}
  yAxis={[
    {
      id: "temp",
      name: "Temperature",
      labelFormatter: (x?: string | number) => `${x}ºC`,
    },
    {
      id: "humidity",
      name: "Humidity",
      labelFormatter: (x?: string | number) => `${x}%`,
      minValue: 10,
    },
  ]}
  xAxis={{
    type: "time",
  }}
  tooltip={{
    titleFormatter: (x?: string | number) =>
      x ? `${new Date(x).toLocaleTimeString()}` : "",
  }}
/>

<HvScatterPlot
  height={400}
  data={{
    Humidity: [42, 46, 48, 50, 40, 35, 30, 22, 21, 12, 10, 15, 18, 22, 22],
    Temperature: [20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 38, 35, 30, 28],
    Time: Array.from(Array(15).keys()).map((i) =>
      new Date(
        new Date(new Date(0, 0, 0, 6, 0, 0)).setHours(
          new Date(0, 0, 0, 6, 0, 0).getHours() + i,
        ),
      ).getTime(),
    ),
  }}
  groupBy="Time"
  measures={[
    {
      yAxis: "temp",
      field: "Temperature",
      valueFormatter: (x?: string | number) => `${x}ºC`,
    },
    {
      yAxis: "humidity",
      field: "Humidity",
      valueFormatter: (x?: string | number) => `${x}%`,
    },
  ]}
  yAxis={[
    {
      id: "temp",
      name: "Temperature",
      labelFormatter: (x?: string | number) => `${x}ºC`,
    },
    {
      id: "humidity",
      name: "Humidity",
      labelFormatter: (x?: string | number) => `${x}%`,
      minValue: 10,
    },
  ]}
  xAxis={{
    type: "time",
  }}
  tooltip={{
    titleFormatter: (x?: string | number) =>
      x ? `${new Date(x).toLocaleTimeString()}` : "",
  }}
/>

Custom ECharts options

You can customize the chart using ECharts options.
In this example, a markLine is added to highlight a specific value or trend in the chart.

<HvScatterPlot
  height={400}
  data={{
    y: [50, 65, 70, 73, 80, 88, 100, 120, 150, 186, 224, 286, 340, 380, 400],
    x: Array.from(
      Array(
        [50, 65, 70, 73, 80, 88, 100, 120, 150, 186, 224, 286, 340, 380, 400]
          .length,
      ).keys(),
    ).map((i) => i + 1),
  }}
  groupBy="x"
  measures="y"
  onOptionChange={(option) => {
    option.series[0].markLine = {
      lineStyle: { type: "solid" },
      data: [
        [
          { coord: [0, 0], symbol: "none" },
          { coord: [15, 300], symbol: "none" },
        ],
      ],
      label: {
        formatter: "y = 20x",
        position: "insideMiddleTop",
      },
    };
    return option;
  }}
/>

<HvScatterPlot
  height={400}
  data={{
    y: [50, 65, 70, 73, 80, 88, 100, 120, 150, 186, 224, 286, 340, 380, 400],
    x: Array.from(
      Array(
        [50, 65, 70, 73, 80, 88, 100, 120, 150, 186, 224, 286, 340, 380, 400]
          .length,
      ).keys(),
    ).map((i) => i + 1),
  }}
  groupBy="x"
  measures="y"
  onOptionChange={(option) => {
    option.series[0].markLine = {
      lineStyle: { type: "solid" },
      data: [
        [
          { coord: [0, 0], symbol: "none" },
          { coord: [15, 300], symbol: "none" },
        ],
      ],
      label: {
        formatter: "y = 20x",
        position: "insideMiddleTop",
      },
    };
    return option;
  }}
/>

Line Chart Treemap