Gallery

Gallery > Axis Ticks And Labels

JS Hidden Ticks

Demonstrates using defaultHiddenTick to stagger tick labels by setting a pixel offset for ticks that are overlapped.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Trace="false" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{

// Demonstrates using defaultHiddenTick to stagger tick labels by setting a pixel offset for ticks that are overlapped.

Chart.Title = " Employees' Report";
Chart.Size = "420x350";
Chart.XAxis.Label.Text = "Employee's Name";
Chart.YAxis.Label.Text = "Annual Salary";
Chart.YAxis.FormatString = "currency";
Chart.TempDirectory = "temp";
Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend;
Chart.Debug = false;
Chart.JS.Enabled = true;

Chart.XAxis.Label.Offset = new Point(0, 10);
//Chart.XAxis.DefaultTick.Line.Length = 5;
Chart.XAxis.DefaultTick.Label.Font = new Font("Tahoma", 9);
Chart.JS.Settings.Add("xAxis.autoRotate", "0");
Chart.JS.Settings.Add("xAxis.defaultHiddenTick.label.opacity", "0.9");
Chart.JS.Settings.Add("xAxis.defaultHiddenTick.label.offset", "'0,14'");
Chart.JS.Settings.Add("xAxis.defaultHiddenTick.label.color", "#887ea5");
Chart.JS.Settings.Add("xAxis.defaultHiddenTick.label.style.fontSize", "11px");
Chart.DefaultElement.ToolTip = "<b>Employee No:</b> %EmployeeID\n<b>Department:</b> %Department\n<b>Email:</b> %email\n<b>Phone:</b> %PhoneNumber";

//Create a series
DataEngine de = new DataEngine();
de.ConnectionString = ConfigurationManager.AppSettings["DNCConnectionString"];
de.SqlStatement = @"SELECT * FROM Employees";
//Set predefined data fields and some custom fields as attributes for x-Axis. (Employee's name)
de.DataFields = "xAxis=name,yAxis=Salary,id=EmployeeID,department=Department,email,phone=PhoneNumber";
SeriesCollection sc = de.GetSeries();

Chart.SeriesCollection.Add(sc);

}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Custom Attributes</title>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

<%@ Page Language="vb" Trace="false" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

' Demonstrates using defaultHiddenTick to stagger tick labels by setting a pixel offset for ticks that are overlapped.

Chart.Title = " Employees' Report"
Chart.Size = "420x350"
Chart.XAxis.Label.Text = "Employee's Name"
Chart.YAxis.Label.Text = "Annual Salary"
Chart.YAxis.FormatString = "currency"
Chart.TempDirectory = "temp"
Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend
Chart.Debug = False
Chart.JS.Enabled = True

Chart.XAxis.Label.Offset = New Point(0, 10)
'Chart.XAxis.DefaultTick.Line.Length = 5;
Chart.XAxis.DefaultTick.Label.Font = New Font("Tahoma", 9)
Chart.JS.Settings.Add("xAxis.autoRotate", "0")
Chart.JS.Settings.Add("xAxis.defaultHiddenTick.label.opacity", "0.9")
Chart.JS.Settings.Add("xAxis.defaultHiddenTick.label.offset", "'0,14'")
Chart.JS.Settings.Add("xAxis.defaultHiddenTick.label.color", "#887ea5")
Chart.JS.Settings.Add("xAxis.defaultHiddenTick.label.style.fontSize", "11px")
Chart.DefaultElement.ToolTip = "<b>Employee No:</b> %EmployeeID" & Constants.vbLf & "<b>Department:</b> %Department" & Constants.vbLf & "<b>Email:</b> %email" & Constants.vbLf & "<b>Phone:</b> %PhoneNumber"

'Create a series
Dim de As DataEngine = New DataEngine()
de.ConnectionString = ConfigurationManager.AppSettings("DNCConnectionString")
de.SqlStatement = "SELECT * FROM Employees"
'Set predefined data fields and some custom fields as attributes for x-Axis. (Employee's name)
de.DataFields = "xAxis=name,yAxis=Salary,id=EmployeeID,department=Department,email,phone=PhoneNumber"
Dim sc As SeriesCollection = de.GetSeries()

Chart.SeriesCollection.Add(sc)

End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Custom Attributes</title>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameJsHiddenTicks.aspx
Version10.3
Uses DatabaseNo

JS Charting

Gallery

JS Hidden Ticks