Skip to content

Latest commit

 

History

History
158 lines (111 loc) · 4.84 KB

common-legend.md

File metadata and controls

158 lines (111 loc) · 4.84 KB

Legend

image

The Legend displays information regarding the chart drawn. TOAST UI Chart comes with three different types of legends, and they can be applied appropriately to different types of charts.

Types and Composition

Basic Legend

The basic Legend consists of a checkbox, icon that displays the color, and the name of the series. Clicking on the checkbox and the name can trigger different functionalities. Let's use them and apply them in order.

First, clicking on the check box can hide the selected series, and another click can make it visible again.

image

Clicking on the series name focuses the chart with respect to the selected series.

image

The basic legend can be used for all TOAST UI Charts except for Heatmap charts and Treemap charts.

Spectrum Legend

Charts that use a colorValue like the Heatmap charts and the Treemap charts use the Spectrum legend instead of the Basic legend. It displays an index for the relative level within the entire chart.

image

Circle Legend

For the Bubble chart, the Circle legend can provide an index for the size of the circle. The value of the outer-most circle represents the largest value in the given data. Furthermore, the circle legend also displays the 0.5x and 0.25x radius values with respect to the largest circle.

image

Options

The following options can modify the legends. This guide explains all options except the width options, and these options are explained in the layout options guide.

interface LegendOptions {
  align?: 'top' | 'bottom' | 'right' | 'left';
  showCheckbox?: boolean;
  visible?: boolean;
  maxWidth?: number;
  width?: number;
  item?: {
    width?: number;
    overflow?: 'ellipsis';
  };
}

interface CircleLegendOptions {
  visible?: boolean;
}

align

  • default: right

The legend can be aligned using the legend.align option, and it can take top, bottom, right, or left as its value. When the legend.align option is used for the circleLegend, the left and right values result in no visible change, and top and bottom options lead make the legend to be displayed to the right.

const options = {
  legend: {
    align: 'bottom',
  },
};

As you can see in the image, the location of the legend has been changed.

image

showCheckbox

  • default: true

The hide/show feature of the checkbox can be controlled through the legend.showCheckbox option. If the showCheckbox is set to false, the legend is displayed without the checkbox.

const options = {
  legend: {
    showCheckbox: false,
  },
};

image

visible

  • default: true

If the legend is not necessary, the legend.visible option can be used to display the chart without the legend.

const options = {
  legend: {
    visible: false,
  },
};

image

item

  • Compatible with: Line, Area, Bar, BoxPlot, Bullet, Column, ColumnLine, LineArea, LineScatter, Pie, Heatmap, Bubble, Scatter, Radar, NestedPie, LineScatter, ColumnLine, Radial, Scatter

Controls the width and overflow options of the legend item. If a value is given to item.width and the overflow setting is not specified, overflow:'ellipsis' is applied.

const options = {
  legend: {
    item: {
      width: 70,
      overflow: 'ellipsis',
    }
  }
}

image

theme

The following theme options can be used to style the legend.

interface Legend {
  label?: {
    fontSize?: number;
    fontFamily?: string;
    fontWeight?: string | number;
    color?: string;
  };
}

Let's write a simple example to change the label's font style using the legend.label.

const options = {
  theme: {
    legend: {
      label: {
        fontFamily: 'cursive',
        fontSize: 15,
        fontWeight: 700,
        color: '#ff416d',
      },
    },
  },
};

image