Changing the labels of x-axis in a scatter line chart

• category axis, which uses discrete data (i.e.. categories), so that custom text can be set to the XAxis' categories/items.

• numeric axis which uses continuous data, so that labels are rendered on equal intervals (i.e. steps) and displays the actual point from the axis. This type of axis doesn't let you use custom text. You can, however, specify  a particular format string for the labels through the DataFormatString property of the axis.

If you are trying, however, to create and add DateTime scatter series items programmatically I can suggest that you initially convert the X value to its JavaScript DateTime representation and then use the desired DateTime format for the XAxis. Such an example is illustrated in this forum thread.

That does not work for me unfortunately.

 Here is my simplified code:

 <telerik:RadHtmlChart runat="server" ID="ScatterChart">                  
                    <PlotArea>
                        <XAxis Type="Auto" >
                            <LabelsAppearance RotationAngle="90" />
                        </XAxis>
                        <YAxis AxisCrossingValue="0"
                        </YAxis>            
                    </PlotArea>
                    <Legend>
                        <Appearance Position="Right">
                        </Appearance>
                    </Legend>
                </telerik:RadHtmlChart>

Dim loopCount As Integer = 1
  For Each dr As DataRow In dt.Rows
                ScatterChart.PlotArea.XAxis.Items.Add(dr("Industry"))           

                Dim mySeriesBase As Telerik.Web.UI.ScatterSeries = New Telerik.Web.UI.ScatterSeries
                mySeriesBase.Name = dr("Industry") & " - Base"
                mySeriesBase.MarkersAppearance.Size = 10
                mySeriesBase.LabelsAppearance.Visible = False

                mySeriesBase.SeriesItems.Add(New Telerik.Web.UI.ScatterSeriesItem(loopCount, dr("BaseLQ")))      

                loopCount = loopCount + 1

            Next

            ScatterChart.DataBind()

When using a scatter chart (i.e., ScatterSeries), the x-axis does not contain categories (items), so you cannot do this. Instead, its labels are at regular intervals (steps) according to the data range and chart settings.

So, you can use templates for its labels (that's a new feature since Danail's answer above) in order to change what they show, in case the DataFormatString does not suit your needs: https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/using-client-templates-legend-axes#client-templates-for-axes-labels.

Hi Marin,

  I am familiar with ClientTemplate, however not sure how to use it in this case considering i am creating series manually and do not hook up datatable as datasource.

Please advice

Thank you

David

The axis label template is not tied to the series, so it is always defined in the same manner. Here's an example:

Well, i thought it was pretty clear that i need something different than value.

In my case it should be industry name. If i would feed my chart from datatable i imagine something like "#=dataItem.Industry#" would work. But i create my chart differently. I am posting my code again just in case:

Dim loopCount As Integer = 1
  For Each dr As DataRow In dt.Rows
                ScatterChart.PlotArea.XAxis.Items.Add(dr("Industry"))           

                Dim mySeriesBase As Telerik.Web.UI.ScatterSeries = New Telerik.Web.UI.ScatterSeries
                mySeriesBase.Name = dr("Industry") & " - Base"
                mySeriesBase.MarkersAppearance.Size = 10
                mySeriesBase.LabelsAppearance.Visible = False

                mySeriesBase.SeriesItems.Add(New Telerik.Web.UI.ScatterSeriesItem(loopCount, dr("BaseLQ")))      

                loopCount = loopCount + 1

            Next

            ScatterChart.DataBind()

So, how can i add Industry to xAxis labels in my example?

The axis does not know about the series and their data so this is not possible. The only argument the axis label template receives is its value (text).

If you have a numerical x-axis (like when you use scatter series) the chart determines the min and max numerical values for the axis range, divides that by the current label step and renders labels with the appropriate text.

If you have a categorical x-axis (like when you use a line series) the x-axis has its own data source - set of items or a field name that it generates labels for. Since they can be strings the developer controls, you can create a hash table that has corresponding label text value from the data source and desired text, and use that for the templates. Only with such a x-axis can you add items to the x-axis, when a scatter series is used they will be ignored.

If you will be having one item per scatter series, then you should transpose the data source so you have one series with appropriate data, values and corresponding x-axis label field value.

Understood

Thank you

Marin,

  So, i am trying to solve problem by adding additional chart underneath the scatter one. What is the best way to hide everything but xAxis for a chart?

The main part of the chart is the plot area and you can't hide it. You can hide axes as they are auxiliary in many charts, but not the main chart area.

            chartLinesCommodity.PlotArea.YAxis.MajorGridLines.Visible = False
            chartLinesCommodity.PlotArea.YAxis.MinorGridLines.Visible = False
            chartLinesCommodity.PlotArea.XAxis.MajorGridLines.Visible = False
            chartLinesCommodity.PlotArea.XAxis.MinorGridLines.Visible = False

Seemed to achieve most of what i needed

Thank you