Gallery

Gallery > Labels

JS Label Overflow Ellipsis

This sample deomonstrates using label maxWidth and disabling AutoWrap.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// This sample deomonstrates using label maxWidth and disabling AutoWrap.

Chart.Type = ChartType.Combo;

Chart.Size = "550x370";
Chart.TempDirectory = "temp";
Chart.LegendBox.Visible = false;
Chart.Debug = false;
Chart.JS.Enabled = true;

Chart.Type = ChartType.ComboHorizontal;

Chart.DefaultElement.Color = ColorTranslator.FromHtml("#FBC02D");
Chart.DefaultElement.ToolTip = "%name <br>%yValue%";

Chart.YAxis.DefaultTick.Label.AutoWrap = false;
Chart.YAxis.DefaultTick.Label.MaxWidth = 150;

// *DYNAMIC DATA NOTE*
// This sample uses random data to populate the chart. To populate
// a chart with database data see the following resources:
// - Classic samples folder
// - Help File > Data Tutorials
// - Sample: features/DataEngine.aspx
SeriesCollection mySC = getData();
// Add the random data.
Chart.SeriesCollection.Add(mySC);

}
SeriesCollection getData()
{
SeriesCollection sc = new SeriesCollection();
Series ser1 = new Series("");
Element el1 = new Element();
el1.Name = "Finance, insurance, real estate, rental, and leasing";
el1.YValue = 21;
ser1.Elements.Add(el1);
Element el2 = new Element();
el2.Name = "Professional and business services";
el2.YValue = 13;
ser1.Elements.Add(el2);
Element el3 = new Element();
el3.Name = "Government";
el3.YValue = 12.1;
ser1.Elements.Add(el3);
Element el4 = new Element();
el4.Name = "Manufacturing";
el4.YValue = 10.7;
ser1.Elements.Add(el4);
Element el5 = new Element();
el5.Name = "Educational services, health care, and social assistance";
el5.YValue = 8.6;
ser1.Elements.Add(el5);
Element el6 = new Element();
el6.Name = "Wholesale trade";
el6.YValue = 6.2;
ser1.Elements.Add(el6);
Element el7 = new Element();
el7.Name = "Retail trade";
el7.YValue = 6;
ser1.Elements.Add(el7);
Element el8 = new Element();
el8.Name = "Information";
el8.YValue = 5.6;
ser1.Elements.Add(el8);
Element el9 = new Element();
el9.Name = "Construction";
el9.YValue = 4.1;
ser1.Elements.Add(el9);
Element el10 = new Element();
el10.Name = "Arts, entertainment, recreation, accommodation, and food services";
el10.YValue = 3.9;
ser1.Elements.Add(el10);
Element el11 = new Element();
el11.Name = "Transportation and warehousing";
el11.YValue = 3;
ser1.Elements.Add(el11);
Element el12 = new Element();
el12.Name = "Other services, except government";
el12.YValue = 2;
ser1.Elements.Add(el12);
Element el13 = new Element();
el13.Name = "Utilities";
el13.YValue = 1.6;
ser1.Elements.Add(el13);
Element el14 = new Element();
el14.Name = "Mining";
el14.YValue = 1.4;
ser1.Elements.Add(el14);
Element el15 = new Element();
el15.Name = "Agriculture, forestry, fishing, and hunting";
el15.YValue = 0.9;
ser1.Elements.Add(el15);
sc.Add(ser1);

return sc;
}

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript">
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' This sample deomonstrates using label maxWidth and disabling AutoWrap.

Chart.Type = ChartType.Combo

Chart.Size = "550x370"
Chart.TempDirectory = "temp"
Chart.LegendBox.Visible = False
Chart.Debug = False
Chart.JS.Enabled = True

Chart.Type = ChartType.ComboHorizontal

Chart.DefaultElement.Color = ColorTranslator.FromHtml("#FBC02D")
Chart.DefaultElement.ToolTip = "%name <br>%yValue%"

Chart.YAxis.DefaultTick.Label.AutoWrap = False
Chart.YAxis.DefaultTick.Label.MaxWidth = 150

' *DYNAMIC DATA NOTE*
' This sample uses random data to populate the chart. To populate
' a chart with database data see the following resources:
' - Classic samples folder
' - Help File > Data Tutorials
' - Sample: features/DataEngine.aspx
Dim mySC As SeriesCollection = getData()
' Add the random data.
Chart.SeriesCollection.Add(mySC)

End Sub
Function getData() As SeriesCollection
Dim sc As SeriesCollection = New SeriesCollection()
Dim ser1 As Series = New Series("")
Dim el1 As Element = New Element()
el1.Name = "Finance, insurance, real estate, rental, and leasing"
el1.YValue = 21
ser1.Elements.Add(el1)
Dim el2 As Element = New Element()
el2.Name = "Professional and business services"
el2.YValue = 13
ser1.Elements.Add(el2)
Dim el3 As Element = New Element()
el3.Name = "Government"
el3.YValue = 12.1
ser1.Elements.Add(el3)
Dim el4 As Element = New Element()
el4.Name = "Manufacturing"
el4.YValue = 10.7
ser1.Elements.Add(el4)
Dim el5 As Element = New Element()
el5.Name = "Educational services, health care, and social assistance"
el5.YValue = 8.6
ser1.Elements.Add(el5)
Dim el6 As Element = New Element()
el6.Name = "Wholesale trade"
el6.YValue = 6.2
ser1.Elements.Add(el6)
Dim el7 As Element = New Element()
el7.Name = "Retail trade"
el7.YValue = 6
ser1.Elements.Add(el7)
Dim el8 As Element = New Element()
el8.Name = "Information"
el8.YValue = 5.6
ser1.Elements.Add(el8)
Dim el9 As Element = New Element()
el9.Name = "Construction"
el9.YValue = 4.1
ser1.Elements.Add(el9)
Dim el10 As Element = New Element()
el10.Name = "Arts, entertainment, recreation, accommodation, and food services"
el10.YValue = 3.9
ser1.Elements.Add(el10)
Dim el11 As Element = New Element()
el11.Name = "Transportation and warehousing"
el11.YValue = 3
ser1.Elements.Add(el11)
Dim el12 As Element = New Element()
el12.Name = "Other services, except government"
el12.YValue = 2
ser1.Elements.Add(el12)
Dim el13 As Element = New Element()
el13.Name = "Utilities"
el13.YValue = 1.6
ser1.Elements.Add(el13)
Dim el14 As Element = New Element()
el14.Name = "Mining"
el14.YValue = 1.4
ser1.Elements.Add(el14)
Dim el15 As Element = New Element()
el15.Name = "Agriculture, forestry, fishing, and hunting"
el15.YValue = 0.9
ser1.Elements.Add(el15)
sc.Add(ser1)

Return sc
End Function

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript">
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameJsLabelOverflowEllipsis.aspx
Version10.5
Uses DatabaseNo

JS Charting

Gallery

JS Label Overflow Ellipsis