SharpPlot Reference > SharpPlot Structures > Marker Struct

Marker Struct

This structures defines Markers for charts. There are a number of built-in, standard markers, but custom markers can also created from arbitrary images, paths, or text.

The 21 built-in markers are listed below (these can be scaled to any size using the SetMarkerScales method) or you may create your own markers from suitable image files (typically GIF images on disk), SVG symbols, XAML paths, or any text character in a suitable font (e.g. WingDings).

public struct Marker

Public Static Properties

Ball	Marker is a large 3D-effect circle
Bar	Marker is a short vertical line
Block	Marker is a filled square
Bullet	Marker is a medium-sized filled circle
Circle	Marker is an open circle
Cross	Marker is a multiply sign
Del	Marker is a triangle on its point
Diamond	Marker is an open diamond
Dot	Marker is a tiny (approx 1 pixel) dot
DownTick	Marker is a downward tick
Hyphen	Marker is a short horizontal line
Invisible	Marker is not drawn
LeftTick	Marker is a left-aligned tick
Lozenge	Marker is a filled diamond
Node	Marker is a small 3D-effect circle
Plus	Marker is a plus sign
RightTick	Marker is a right-aligned tick
Ring	Marker is a large open circle
SmallBullet	Marker is a small filled circle
Triangle	Marker is a triangle on its base
UpTick	Marker is an upward tick

Public Constructor

Creates a custom marker from a character, or URI to an included SVG symbol or image file.

public Marker(
   string sourceName  // Image is also accepted here
);

Example

Marker ms = new Marker("wingdings,9,#146");
Marker hex = new Marker("{ m -3,0 l 2,2 2,0 2,-2 -2,-2 -2,0 z }");
sp.SetMarkers(new Marker[]{Marker.Cross,Marker.Lozenge,ms,hex});

Creating Custom Markers from Text

The WingDings font is an excellent source of extra marker symbols, and SharpPlot makes it very easy to create markers from any character in any available font. Note that character markers may not work on your user’s browser in the VML or SVG formats unless the correct font is installed. For image formats, the font only needs to be installed on the server.

The string argument to Marker takes three elements, separated by commas. These give:

• the font name, with optional capitalisation but containing any embedded spaces.
• the character size to form markers for markerscale=1 (they will be scaled as required).
• the character or short string that forms the marker. This will be horizontally and vertically centered at each data point. Characters may be given literally (for example in the definition “Arial,10,pH”) or as the decimal code following a # symbol.

Creating Custom Markers from Images

It is also possible to reference small image files as markers in which case you can simply give the URL of the marker file, with an optional ‘natural size’ to scale it:

sp.SetMarkers(new Marker("apple.gif=12,12"));

By default, the image will be scaled to (16,16) where the marker scale = 1. It is obviously important to keep the width and height of the included image in the same ratio as the actual width and height of the referenced file if you override the size.

For charts to be rendered as Raster output, it may be convenient to pass an existing Image object here:

public Marker(
   Image image
);

In this case the size is completely determined by the width and height of the object, so you may need to scale it before passing it to SharpPlot. Using very large markers may make the legend align poorly – be warned!

Example

Marker bug = new Marker(new Bitmap("ladybug.png"));
sp.SetMarkers(bug);

The image will be used at actual size unless the MarkerScale array is set to scale them as needed.

You may combine both methods, giving an Image for raster use and a source URL for the same (or a different) image for use in vector output:

Marker bug = new Marker(new Bitmap("ladybug.png"),"http://serverpath/ladybug16.gif");
sp.SetMarkers(bug);

Creating Custom Markers from Paths

The XAML specification has a simple notation for drawing any vector path, so this is what SharpPlot uses to allow you to build any vector path as a marker. This notation works in all output formats, so is preferred to the symbol reference which is supported only by SVG.

Some examples of simple paths are:

hex = "{ m -3,0 l 2,2 2,0 2,-2 -2,-2 -2,0 z }";  // stroke is implied but note the closepath!
box = "{ m -2 -2 v 4 h 4 v -4 z }";  // Minimalist square
duck = "{  m -11 4 c 1.95 -1.65 3.66 -1.89 6.81 -0.33 3.12  ....  5.91} F";   // Filled duck

The path is enclosed in braces, and the commands you can use are:

m

relative moveto

l

relative lineto

c

relative curveto

v

relative vertical lineto

h

relative horizontal lineto

z

closepath (join the figure to its startpoint cleanly)

S

stroke the finished path (implied if omitted)

F

fill the finished path

Pairs of co-ordinates may be separated by commas or spaces, and the path command does not need to be repeated when there is a long sequence of similar commands (typically a polyline). Note that only the relative path commands may be used and that the marker is drawn with the (0,0) point at the data – it is up to you to get a good visual balance for complex symbols such as the duck.

Filled symbols will be outlined in the current background color if the Halo style has been set on the chart.

Creating Custom Markers from SVG Symbols (SVG output only)

For SVG output, it is possible to include the code for any SVG symbol inline in the output stream, then refer to the included symbol by its id:

sp.IncludeSource(myDuck);
sp.SetMarkers(new Marker[]{Marker.Lozenge,new Marker("#duck=32,24")});

where the first few lines of the duck might be:

  <symbol id="duck" viewBox="0 0 3200 2400">
   <path d="
        M 424 1424 
        C 619 1589 790 1613 1105 1457 
        C 1417 1301 1474 1325 1564 1340 
        C 1654 1352 1681 1388 1723 1355 
        C 1867 1241 1684 836 1915 716 
        C 2032 656 2164 704 2263 794 
        C 2362 884 2446 1052 2647 1055 
        C 2587 1190 2563 1202 2248 1190 
        C 1933 1181 2014 1361 2185 1511 
        C 2266 1589 2425 1712 2377 1898 
        C 2329 2084 2119 2147 1888 2147 
        C 1657 2147 1060 2117 832 2015 
        C 622 1877 430 1547 424 1424 z"
         stroke="#000000"
         fill="Teal"
         stroke-width="20" />
 </symbol>

The proportions given in the viewbox should normally match the width and height given for the symbol in the definition.

Requirements

Namespace: Causeway

Assembly: SharpPlot (in sharpplot.dll)

See also ...

SharpPlot Members | SharpPlot.IncludeSource Method | SharpPlot.SetMarkers Method

Send comments on this topic
© Dyalog Ltd 2021