React
Demos
Support
Forum
Download
Search results

Markers and Data labels

The markers and data labels are used to provide information about the data points in the series. You can add a shape to adorn each data point. By default, both the marker and data label are disabled in Smith chart. You can enable them by setting the visible property to true in marker and data label settings.

Marker

By default, the visibility of marker is false. You can enable marker by setting the visible property to true in marker settings. Using marker settings, you can customize marker differently for each series in 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>

Marker customization

Using marker settings in series, you can customize the marker for each series differently. You can customize the markers using the following properties differently for each series in the Smith chart:

  • [width]: Controls the width of the marker.
  • [height]: Controls the height of the marker.
  • [fill]: Customizes the fill color of the marker.
  • [opacity]: Customizes the opacity of the marker.
  • [border]: Controls the width and color of the marker’s border.
  • [shape]: Changes the shape of the marker.
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>

Data labels

By default, the data labels are disabled. You can enable the data labels by setting the visible property to true in data label settings. For each point in series, a data label is created. The data labels for each series can be customized differently using the data label settings.

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>

Data label customization

Using data label settings in marker, you can customize the data label for each series differently. The following properties are used to customize data labels differently for each series:

  • [fill]: Changes the fill color of the data label’s shape.
  • [opacity]: Controls the opacity of the data label’s shape.
  • [border]: Customizes the width and color of the border.
  • [textStyle]: Customizes the font color, width, and size.
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>
Previous
Next