Gallery

Gallery > Labels

JS Label Lists

Demonstrates using lists and images to text annotations.

Download Show C# Code Show VB Code

<%@ Page Language="C#" 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 lists and images to text annotations.
Chart.Type = ChartType.Combo;
Chart.Width = 340;
Chart.Height = 600;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.LegendBox.Visible = false;

//Clear chart
Chart.ChartArea.ClearColors();
Chart.ChartArea.Line.Width = 0;
Chart.Palette = new Color[] { };

//Enable JS
Chart.JS.Enabled = true;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.DefaultAxis.DefaultTick.GridLine.Width = 0;

//add annotation
Annotation an = new Annotation();
an.Line.Color = Color.LightGray;
an.Background.Color = Color.White;
an.Line.Width = 1;
an.Label.AutoWrap = false;
an.Label.Text = "" +
"<img src=\"https://cdn.countryflags.com/thumbs/united-states-of-america/flag-round-250.png\" height=30 width=30> Federal Holidays 2020" +
"<hr><ul>" +
"<li>January" +
"<ul><li>1/1/2020 New Year's Day</li><li>1/20/2020 Martin Luther King Day</li></ul>" +
"</li><li>February" +
"<ul><li>2/17/2020 President's Day</li></ul>" +
"</li><li>May" +
"<ul><li>5/25/2020 Memorial Day</li></ul></li><li>July" +
"" +
"<ul><li>7/3/2020 Independence Day (observed)</li><li>7/4/2020 Independence Day</li></ul></li><li>September" +
"" +
"<ul><li>9/7/2020 Labor Day</li></ul></li><li>October" +
"" +
"<ul><li>10/12/2020 Columbus Day</li></ul></li><li>November" +
"" +
"<ul><li>11/11/2020 Veterans Day</li>" +
"<li>11/26/2020 Thanksgiving Day</li></ul></li><li>December" +
"" +
"<ul><li>12/25/2020 Christmas Day</li></ul></li></ul>";

Chart.Annotations.Add(an);

Chart.JS.Settings.Add("annotations.0.position", "CA:center");
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</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" %>

<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates using lists and images to text annotations.
Chart.Type = ChartType.Combo
Chart.Width = 340
Chart.Height = 600
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.LegendBox.Visible = False

'Clear chart
Chart.ChartArea.ClearColors()
Chart.ChartArea.Line.Width = 0
Chart.Palette = New Color() { }

'Enable JS
Chart.JS.Enabled = True
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Chart.DefaultAxis.DefaultTick.GridLine.Width = 0

'add annotation
Dim an As Annotation = New Annotation()
an.Line.Color = Color.LightGray
an.Background.Color = Color.White
an.Line.Width = 1
an.Label.AutoWrap = False
an.Label.Text = "" & "<img src=""https://cdn.countryflags.com/thumbs/united-states-of-america/flag-round-250.png"" height=30 width=30> Federal Holidays 2020" & "<hr><ul>" & "<li>January" & "<ul><li>1/1/2020 New Year's Day</li><li>1/20/2020 Martin Luther King Day</li></ul>" & "</li><li>February" & "<ul><li>2/17/2020 President's Day</li></ul>" & "</li><li>May" & "<ul><li>5/25/2020 Memorial Day</li></ul></li><li>July" & "" & "<ul><li>7/3/2020 Independence Day (observed)</li><li>7/4/2020 Independence Day</li></ul></li><li>September" & "" & "<ul><li>9/7/2020 Labor Day</li></ul></li><li>October" & "" & "<ul><li>10/12/2020 Columbus Day</li></ul></li><li>November" & "" & "<ul><li>11/11/2020 Veterans Day</li>" & "<li>11/26/2020 Thanksgiving Day</li></ul></li><li>December" & "" & "<ul><li>12/25/2020 Christmas Day</li></ul></li></ul>"

Chart.Annotations.Add(an)

Chart.JS.Settings.Add("annotations.0.position", "CA:center")
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameJsLabelLists.aspx
Version9.1
Uses DatabaseNo

JS Charting

Gallery

JS Label Lists