Search results

Legend

Legend is a key used in smithchart; it contains symbols and descriptions. The legends provide a valuable information for interpreting what the Smith chart displays. They can be represented in various colors, shapes, or other identifiers based on the data. The legends are used to denote the series rendered in the Smith chart.

Position and alignment

Position

By default, the visibility of the legend is false. To enable the legend, set the visible property to true in legendSettings. The default position for the legend is bottom. By using the [position] property, you can either place the legend at the bottom, top, right, or left of the Smith chart. To use the legend in Smith chart, import and inject the SmithchartLegend from chart.

Source
Preview
index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #smithchart {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='smithchart'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>

Custom position

The legends are not limited to place at the default positions only. You can place a legend anywhere in the Smith chart by setting the position as custom in legendSettings and specifying the x and y-coordinates using the x and y properties.

Source
Preview
index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #smithchart {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='smithchart'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>

Legend alignment

By default, the legends are aligned in center position. Using the [alignment] property, you can align the legend in near and far locations of the Smith chart.

Source
Preview
index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #smithchart {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='smithchart'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>

Customization

Legend shape

By default, the legends are rendered in a circle shape. The color of the shape will be same as the series color. Using the [shape] property in legend settings, you can change the shape of the legend to rectangle, triangle, and so on.

Source
Preview
index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #smithchart {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='smithchart'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>

Legend size

By default, a legend takes 20 to 25% of the chart’s height horizontally when it is placed at the top or bottom position and 20 to 25% of the width vertically when placing at the left or right. You can change the legend size using the [width] and [height] properties of the legendSettings.

Source
Preview
index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #smithchart {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='smithchart'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>

Padding

You can customize the space between two legend items and space between legend shape and text as needed. For customizing the space between two legend items, use the [itemPadding] property. To control the space between legend shape and text, use the [shapePadding] property.

Source
Preview
index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #smithchart {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='smithchart'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>

Toggle visibility

By default, the series name is displayed in the legend. You can collapse the visibility of a series by clicking the legend for the particular series and toggle the series visibility to true or false using the [toggleVisibility] property. By default, this property is set to true.

Source
Preview
index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #smithchart {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='smithchart'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>