Skip to content

Latest commit

 

History

History
318 lines (257 loc) · 8.48 KB

common-plot.md

File metadata and controls

318 lines (257 loc) · 8.48 KB

Plot

The plot is the area where the actual chart series is rendered.

image

The following is a list of options available with the plot.

type PlotOption = {
  width?: number;
  height?: number;
  visible?: boolean;
  lines?: {
    value: number | string;
    color: string;
    opacity?: number;
    id?: string;
  }[];
  bands?: {
    range: [number, number] | [string, string] | [number, number][] | [string, string][];
    color: string;
    opacity?: number;
    mergeOverlappingRanges?: boolean;
    id?: string;
  }[];
};

The charts that support each option are as follows.

Option Name Chart Name
width All charts
height All charts
visible Scatter, Bubble, Bar, Column, BoxPlot, Bullet, Line, Area, LineArea, LineScatter, ColumnLine
lines Line, Area, LineArea, LineScatter, ColumnLine
bands Line, Area, LineArea, LineScatter, ColumnLine

width and height options can change the size of the plot area. This guide does not discuss width and height, so consult the Layout for details.


The visible option can be used with charts that show plot lines and can decide whether to display the lines. The default value is set to true.

Setting it to be false will make it so that the lines are not displayed in the plot areas.

const options = {
  plot: {
    visible: false
  }
};

image


Options lines and bands are explained in greater detail below.

lines

The lines option can be used to add new lines to the plot area.

type PlotOption = {
  ...
  lines?: {
    value: number | string;
    color: string;
    opacity?: number;
    id?: string;
  }[];
};
Name Type Details
lines line[] Defines the array of line objects
line.value number | string Value that corresponds to the x axis
line.color string Line color
line.opacity number Line opacity
line.id string Line id; when passed to removePlotLine API, the corresponding line is deleted

For usage information, refer to the following example.

const options = {
  plot: {
    ...
    lines: [
      {
        value: 4,
        color: '#1467e4',
      },
      {
        value: 10,
        color: '#fa2828',
      }
    ]
  }
};

image

bands

The bands option can be used to color the background of a predefined area within the plot.

For Line, Area, LineArea, LineScatter, ColumnLine Charts

type PlotOption = {
  ...
  bands?: {
    range: [number, number] | [string, string] |<br> [number, number][] | [string, string][];
    color: string;
    opacity?: number;
    mergeOverlappingRanges?: boolean;
    id?: string;
  }[];
};
Name Type Details
bands band[] Defines the array of bands objects
band.range [number, number] | [string, string] | [number, number][] | [string, string][] Values that correspond to the x-axis; entered in the array in the order of starting value and ending value
band.color string Box color
band.opacity number Box color opacity
band.mergeOverlappingRanges boolean Determines whether to display overlapping bands when there are overlapping values in the range (default: false)
band.id string Band id; when passed to removePlotBand, the corresponding band is deleted

For usage information, refer to the following example.

const options = {
  plot: {
    bands: [
      {
        range: [
          ['08/22/2020 10:35:00', '08/22/2020 10:45:00'],
          ['08/22/2020 10:40:00', '08/22/2020 10:55:00'],
        ],
        color: '#00bcd4',
        opacity: 0.2
      },
      {
        range: [['08/22/2020 10:05:00', '08/22/2020 10:15:00']],
        color: '#ff5722',
        opacity: 0.1
      }
    ]
  }
};

image

When mergeOverlappingRanges option is set to true, overlapping areas can be displayed naturally.

const options = {
  plot: {
    bands: [
      {
        range: [
          ['08/22/2020 10:35:00', '08/22/2020 10:45:00'],
          ['08/22/2020 10:40:00', '08/22/2020 10:55:00'],
        ],
        color: '#00bcd4',
        opacity: 0.2,
        mergeOverlappingRanges: false
      },
      ...
    ]
  }
};

image

theme

Themes can be used to change the line style and the background color for the plot area.

type PlotTheme = {
  lineColor?: string;
  lineWidth?: number;
  dashSegments?: number[];
  vertical?: {
    lineColor?: string;
    lineWidth?: number;
    dashSegments?: number[];
  };
  horizontal?: {
    lineColor?: string;
    lineWidth?: number;
    dashSegments?: number[];
  };
  backgroundColor?: string;
};
Name Type Details
lineColor string Line color
lineWidth number Line width
dahsSegments number[] Line dashSegment value
vertical object Styles used for vertical lines
horizontal object Styles used for horizontal lines
backgroundColor string Plot area background color

The following is an example of changing the line color and the background color by configuring the plot themes.

const options = {
  theme: {
    plot: {
      vertical: {
        lineColor: 'rgba(60, 80, 180, 0.3)',
        lineWidth: 5,
        dashSegments: [5, 20],
      },
      horizontal: {
        lineColor: 'rgba(0, 0, 0, 0)',
      },
      backgroundColor: 'rgba(60, 80, 180, 0.1)'
    }
  }
};

image

For Gauge Chart

type GaugePlotOption = {
  ...
  bands?: {
    range: [number, number] | [string, string];
    color: string;
    id?: string;
  }[];
};
Name Type Details
bands band[] Defines the array of bands objects
band.range [number, number] | [string, string] | Values that correspond to the circular-axis; entered in the array in the order of starting value and ending value
band.color string Plot sector color
band.id string Band id; when passed to removePlotBand, the corresponding band is deleted

For usage information, refer to the following example.

const options = {
  ...
  plot: {
    bands: [
      { range: [0, 20], color: '#55bf3b' },
      { range: [20, 50], color: '#dddf0d' },
      { range: [50, 110], color: '#df5353' },
    ]
  }
};

gauge-plot

theme

The following are plot themes that can be used in Gauge charts. You can change the thickness of the plot range area.

type GaugePlotTheme = {
  bands: {
    barWidth?: number;
  };
};
Name Type Details
bands object Band theme
bands.barWidth number Band width

The following is an example of changing the thickness of the plot area by setting the plot theme.

const options = {
  theme: {
    plot: {
      { bands: { barWidth: 30 } }
    }
  }
};

gauge-plot-theme