SpreadJS 14
Features / Charts / Chart Elements / Data Markers
In This Topic
    Data Markers
    In This Topic

    SpreadJS enables users to create powerful charts by allowing them to configure data markers using different types of shapes and lines. Data markers are used to highlight data points in charts. While working with line charts and radar charts, you can change the appearance of the data markers to distinguish a series and enhance data visualization.

    The following chart types support configuration of data markers in the worksheet.

    The SymbolShape enumeration offers the following types of shapes while configuring data markers in charts.

    SymbolShape Value Image
    circle 0 Circle
    dash 1 Dash
    diamond 2 Diamond
    dot 3 Dot
    none 4    none
    plus 6 Plus
    square  7 Square
    star 8 Star
    triangle 9 Triangle
    x 10 Cross

    The LineType enumeration offers the following line types while configuring data markers in charts.

    LineType Value Image
    solid 0 Solid
    dot 1 Dot
    dash 2 Dashed
    lgDash 3 Lgdash
    dashDot 4 Dashdot
    lgDashDot 5 LgDashDot

    lgDashDotDot
    6 LgDashDotDot
    sysDash 7 SysDash
    sysDot 8 SysDot
    sysDashDot 9 SysDashDot
    sysDashDotDot 10 SysDashDotDot

    Example

    For example, let's say you're working with a business application that shows the usage of different web browsers using a line chart. Now, you may want to highlight the color and shape of an individual point in the chart or modify all the data points in a series without altering other data in the chart. Configuring data markers of different colors and shapes will enable your chart to stand out from the rest and will make it easy for business analysts to manipulate and highlight crucial information quickly and effectively.

    The following image depicts a Line Chart with markers. Each point on the line is a data marker that represents a single data value located in the cell.

    Line Chart with markers 

    Using Code

    Refer to the following code in order to configure data markers in a line chart.

    JavaScript
    Copy Code
    <script>
    $(document).ready(function ()
    {
    var chart_line, chart_lineStacked, chart_lineStacked100, sheet;
    window.onload = function ()
    {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    var sheet = spread.getActiveSheet();
    var dataArray =
    [
      ["", '2012', '2013', '2014', '2015', '2016', '2017'],
      ["Chrome", 0.3782, 0.4663, 0.4966, 0.5689, 0.6230, 0.6360],
      ["FireFox", 0.2284, 0.2030, 0.1801, 0.1560, 0.1531, 0.1304],
      ["IE", 0.3214, 0.2491, 0.2455, 0.1652, 0.1073, 0.0834],
      ];
    sheet.setArray(0, 0, dataArray);
    var chart = sheet.charts.add('chart1', GC.Spread.Sheets.Charts.ChartType.lineMarkers, 30, 85, 400, 250, 'A1:G4');
    var ser1 = chart.series().get(0);
    ser1.symbol =
    {
      fill: 'red',
      fillColorTransparency: 0.3,
      size: 20,
      shape: GC.Spread.Sheets.Charts.SymbolShape.triangle,
      border:
       {
         color: "green",
         width: 2,
         lineType: GC.Spread.Sheets.Charts.LineType.solid,
         colorTransparency: 0.5,
       }
    }
    chart.series().set(0, ser1);
    };
    });
    </script>