This is a migrated thread and some comments may be shown as answers.

Telerik HTML 5 Chart Tooltip and x-Axis position issue

3 Answers 204 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

Waqar asked on 12 May 2013, 02:08 AM

I have following chart I want to set two things using C#

How can I set x-axis legends below chart not below axis since it overlaping lines?
I am setting tooltip is not appearing like this "{0} Sentiment - {1} Volume"?

Chart Preview

private void FillChart(IEnumerable<EntitySearchResponse> data)

{

SentimentChart.ChartTitle.Text = "Sentemants Per day";

SentimentChart.PlotArea.YAxis.TitleAppearance.Text = "Sentimants %";

SentimentChart.PlotArea.XAxis.LabelsAppearance.RotationAngle = 90;

SentimentChart.PlotArea.XAxis.Step = 10;

SentimentChart.PlotArea.XAxis.Items.Clear();

foreach (var date in data.Select(x => x.Date).Distinct())

{

var axisItem = new AxisItem(date.ToString("ddd dd"));

SentimentChart.PlotArea.XAxis.Items.Add(axisItem);

}

SentimentChart.DataSource = data;

SentimentChart.PlotArea.Series.Clear();

foreach (var entityName in data.Select(x => x.EntityName).Distinct())

{

var series = new ColumnSeries();

series.LabelsAppearance.DataFormatString = "{0} items";

series.TooltipsAppearance.DataFormatString = "{0} {2} items";

series.Name = entityName;

var items = data.Where(x => x.EntityName == entityName).ToList();

foreach (var entitySearchResponse in items)

{

var seriesItem = new SeriesItem(entitySearchResponse.Sentiment);

seriesItem.TooltipValue = string.Format("{0} Sentiment - {1} Volume", entitySearchResponse.Sentiment,

entitySearchResponse.Volume);

series.Items.Add(seriesItem);

}

SentimentChart.PlotArea.Series.Add(series);

}

3 Answers, 1 is accepted

answered on 15 May 2013, 02:33 PM

RadHtmlChart-Programmatic-ToolTips.zip

Hello Waqar,

You can use the TextStyle property in the XAxis' LabelsAppearance element in order to set larger margin/padding of the labels so that they get aligned out of the chart. Note that the larger margin/padding will decrease the size of the chart's plot area so that the chart boundaries are kept. Therefore you should also increase the dimensions of the chart respectively.

Regarding your question about formatting the ToolTips, note the following:

For ColumnSeries you can set only one placeholder - {0} in the DataFormatString property of the TooltipsAppearance/LabelsAppearance that represents the YValue of the Series Item.

The ToolTip for an individual Series Item cannot be set, unless the HtmlChart is databound to a datasource. This help article and this online demo will shed more light on using ClientTemplates. The exception is the Bubble Series, which Series Items expose the ToolTipValue property.

It seems that you are creating the Series of the HtmlChart programmatically. ClientTemplates, as already mentioned, can only be used when the HtmlChart is databound to a datasource. Therefore you can recreate your current logic in order to simulate a datasource which is to be databound. Please find an example attached that sheds more light on how to do that.

Should you need further assistance on this matter, do not hesitate to contact us again.

Kind regards,
Danail Vasilev
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 06 Jun 2013, 05:12 PM

Hi Torben,

You can create an additional column in your datasource or use an existing one for the PieSeries names. Then the PieSeries property NameField can be used, in order to reference it. For example:

//Create a DataTable datasource

DataTable tbl = new DataTable();

tbl.Columns.Add(new DataColumn("ID"));

tbl.Columns.Add(new DataColumn("MonthName"));

tbl.Columns.Add(new DataColumn("NameField1"));

...

PieSeries currSeries = new PieSeries();

currSeries.NameField = "NameField1";

You can also find useful the server-side API of RadHtmlChart.

Regards,
Danail Vasilev
Telerik