SyncFusion Library

# CsfWebChart

## Line Chart Demo

![](https://support.dataaccess.com/Forums/attachment.php?attachmentid=15862&d=1672532300)

The DataFlex code for the above looks like

~~~ text

        Object oFirstSeries is a csfWebChartSeries

          Object oFirstMarkers is a csfWebChartMarkerSettings

            Set pbVisible to True

            Object oFirstDataLabel is a csfWebChartDataLabelSettings

              Set pbVisible to True

              Set psPosition to "Top"

              Set psAlignment to "Near"

            End_Object

          End_Object

          Procedure OnAddChartData

            Send AddPoint 1 2

            Send AddPoint 2 3.6

            Send AddPoint 3 7

            Send AddPoint 4 6

          End_Procedure

        End_Object  

        Object oSecondSeries is a csfWebChartSeries

          Object oSecondMarkers is a csfWebChartMarkerSettings

            Set pbVisible to True

            Set psShape   to "Diamond"

            Object oSecondDataLabel is a csfWebChartDataLabelSettings

              Set pbVisible to True

              Set psPosition to "Bottom"

              Set psAlignment to "Far"

            End_Object

          End_Object

          Procedure OnAddChartData

            Send AddPoint 1 1

            Send AddPoint 2 3

            Send AddPoint 3 5

            Send AddPoint 4 8

          End_Procedure

        End_Object  

      End_Object

~~~

The Series object has your data.

There are markers (the diamond shapes and the dots) to indicate your data point.

There's also a DataLabel to display the actual value of your data point.

You put the marker object in your series object and customize that… then if you want to do something specific with the dataLabel you add a datalabel object in that and tweak the settings for it.

DataLabel as well as Marker objects are both optional.

This pretty much matches the JSON object definitions as is documented over at SyncFusion.

## Bar Chart Demo

![](https://support.dataaccess.com/Forums/attachment.php?attachmentid=15863&d=1672532319)

The DataFlex code looks like:

~~~ text

~~~