This sample demonstrates how specify the custom legend.
For detailed implementation, please take a look at the Aspx code tab.
<%@ Page Language="C#" %>
<%@ Register assembly="JQChart.Web" namespace="JQChart.Web.UI.WebControls" tagprefix="jqChart" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="~/Content/jquery.jqChart.css" />
<link rel="stylesheet" type="text/css" href="~/Content/themes/le-frog/jquery-ui-1.8.20.css" />
<script src="<% = ResolveUrl("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script>
<script src="<% = ResolveUrl("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script>
</head>
<body>
<form runat="server">
<jqChart:Chart ID="Chart1" Width="500px" Height="300px" runat="server">
<Title Text="Custom Legend"></Title>
<Legend><Title Text="Legend"></Title>
<CustomItems>
<jqChart:LegendItem>
<Text Text="No. of Issues: 25">
</Text>
<Marker>
<FillStyle Color="transparent">
</FillStyle>
</Marker>
</jqChart:LegendItem>
<jqChart:LegendItem>
<Text Text="Active: 15">
</Text>
<Marker>
<FillStyle Color="Red">
</FillStyle>
</Marker>
</jqChart:LegendItem>
<jqChart:LegendItem>
<Text Text="Resolved: 5">
</Text>
<Marker>
<FillStyle Color="Green">
</FillStyle>
</Marker>
</jqChart:LegendItem>
<jqChart:LegendItem>
<Text Text="Closed: 5">
</Text>
<Marker>
<FillStyle Color="orange">
</FillStyle>
</Marker>
</jqChart:LegendItem>
</CustomItems>
</Legend>
<Animation Enabled="True" Duration="00:00:01" />
<Axes>
<jqChart:LinearAxis Location="Left" ExtendRangeToOrigin="true"></jqChart:LinearAxis>
</Axes>
<Series>
<jqChart:ColumnSeries>
<XValues>
<jqChart:StringValue Value="Active" />
<jqChart:StringValue Value="Resolved" />
<jqChart:StringValue Value="Closed" />
</XValues>
<YValues>
<jqChart:DoubleValue Value="15" />
<jqChart:DoubleValue Value="5" />
<jqChart:DoubleValue Value="5" />
</YValues>
<FillStyle FillStyleType="LinearGradient" Y1="0">
<ColorStops>
<jqChart:ColorStop Color="#eea151" />
<jqChart:ColorStop Color="#ea8f44" Offset="0.49" />
<jqChart:ColorStop Color="#e67e28" Offset="0.5" />
<jqChart:ColorStop Color="#e06818" Offset="1" />
</ColorStops>
</FillStyle>
</jqChart:ColumnSeries>
</Series>
</jqChart:Chart>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SamplesBrowser.Models
{
public class EmptyChartModel
{
}
}