Data Markers

  • In conventional charts we use bars and lines to represent data points. From the 4.4 version, Vitara charts will allow users to use markers to represent the data points.
  • You can select the data markers from the set of markers listed in the markers menu or you can upload customized markers.
  • The data markers feature is available in the bar, column, line, area, sparkline, grid and micro charts.

    The following section will explain how to show a marker on the bar chart instead of bars.

    In the vitara bar chart click on ‘Edit’ button to open the properties window.
    In the properties window open the ‘Series’ menu. Click on ‘Edit’ for the series on which you want to show the data markers.
    Expnad the ‘Type’ drop down box, and select the option ‘Data Markers’. When we select the option ‘Data Markers’, the series window will display all the options related to data markers.
    In the below screenshot the basic properties of the data markers like marker selection, marker color and marker size are highlighted.

    Marker Type, Marker Size and Marker Color

    Click on the marker icon to open the marker selection window. Please refer to the below screenshot.
    After selecting the desired marker close the marker selection window. Select the size of the marker and color.
    Below is the screenshot of bar chart in which the bars are replaced with marker.

    Keep aspect ratio

    When we enable data markers, one marker will be displayed for each data point . The position of the data marker will depend on the value of the data point. If we disable the Keep aspect ratio property, the data marker will be streched to fill the gap from the axis origin, i.e. 0, to the value of the data point.

    Below is the screenshot of how the data markers looks when we disable Keep Aspect ratio property.

    Repeat Marker

    In the normal mode, for each data point one data marker will be displayed. Using Repeat Marker property the data markers will from a bar/column shape filled with marker. Inside each bar the marker will be filled with some predefined number of rows.

    Enable the check box Repeat Marker.


    Select nummber of units per row. Click on apply.


If we choose fill mode, the data markers will be filled with a color depending on the value we set as Maximum value (while the marker size remains the same for all data points).





Data markers as scatter chart

Prior to 4.4 version we can implement the scatter chart using the options in the series tab. In the 4.4 release we removed the “Scatter” option from the “Series” tab. Now we can use “Data Markers” option to implement the scatter charts. In the 4.4 version, the series-type drop down box will look as shown below.

Below are the steps to implement the scatter chart using the Vitara charts 4.4 version.
Step 1: Use a Vitara Bar/column chart.

Step 2: In the “Appearance” tab, enable the option “Overlay Bar/Column”.

Step 3: Open the “Series” tab and for the metric which you want to show as a simple tick, click on ‘Edit’.

Step 4: Select the series type as “Data Markers”.

Step 5: When we select the option ‘Data Markers’, the series window will display all the options related to data markers.

Step 6: Click on “Apply” button.

Custom SVG Markers

From the 4.5 version of vitara charts, a new feature is added so that users can choose the data markers according to their choice. That means the user can upload a local svg file to the server and use it as a data marker in Vitara charts.
Custom svg markers can be used in the following vitara charts properties:

        Series tab, 
        Markers tab, and 
        Thresholds tab.  

This feature is supported in the below charts.
Area, Bar, Bubble, Bullet, Column, Dumbbell, Histogram, Line, Simple KPI, Slope, Sparkline, Tornado, Trellis, and Waffle.

From 4.6.1 version of Vitara Charts, Custom SVG markers can be used in the thresholds. That means the user can upload the .svg file to the server and use it as data marker in the Vitara Grid chart.


Lets see how to use custom markers in the below steps. For better understanding of the process, we will consider the custom svg file as ‘car.svg’ in this example

Step 1:
Upload an svg file [car.svg in this case] into the server to this path in the plugins folder. {VitaraCharts/custom/images/}

Step 2:
Create any chart [line chart for example] that supports custom svg markers. Go to the marker tab, enable marker and click the ‘marker type’ icon, then the marker selection window will be opened. See the screenshot below.

Step 3:
Go to the Custom tab. Enter the name of the file in the SVG path textbox [e.g, car.svg(name is case sensitive)] and click on ‘Apply’ and close the marked selection window. See the screenshot below

Then the custom svg marker[car] gets applied on the chart. see screenshot below

In this way, the custom markers can be applied from the Series tab and Thresholds tab as well.