jQuery UI Widgets › Forums › Chart › Display XAxis Lables as Legends
Tagged: Angular chart, chart legend, javascript chart, jquery chart
This topic contains 1 reply, has 2 voices, and was last updated by ivailo 8 years, 4 months ago.
-
Author
-
Hi,
I have one requirement like X-Axis Labels need to display as Legends,
Sample Code:
In Below Example series is displaying as a legend, I want to display the “Day” as a legend, Please help me to display X-axis Labels as a Legends
<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {// prepare chart data
var sampleData = [
{ Day:’Monday’, Keith:30, Erica:15, George: 25},
{ Day:’Tuesday’, Keith:25, Erica:25, George: 30},
{ Day:’Wednesday’, Keith:30, Erica:20, George: 25},
{ Day:’Thursday’, Keith:35, Erica:25, George: 45},
{ Day:’Friday’, Keith:20, Erica:20, George: 25},
{ Day:’Saturday’, Keith:30, Erica:20, George: 30},
{ Day:’Sunday’, Keith:60, Erica:45, George: 90}
];// prepare jqxChart settings
var settings = {
title: “Fitness & exercise weekly scorecard”,
description: “Time spent in vigorous exercise”,padding: { left: 5, top: 5, right: 50, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: sampleData,
xAxis:
{
dataField: ‘Day’,
valuesOnTicks: false,
showLegend: true,
},
valueAxis:
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: {text: ‘Time in minutes’}
},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘bubble’,series: [
{ dataField: ‘George’, displayText: ‘George’,visible :false}
]
}
]
};// select the chartContainer DIV element and render the chart.
$(‘#chartContainer’).jqxChart(settings);
});
</script><style type=”text/css”>
.redLabel
{
fill: #FF0000;
color: #FF0000;
font-size: 11px;
font-family: Verdana;
}.blueLabel
{
fill: #0000FF;
color: #0000FF;
font-size: 11px;
font-family: Verdana;
}
</style>
</head>
<body class=’default’>
<div id=’chartContainer’ style=”width: 1000px; height: 500px;”>
</div>
</body>
</html>Thanks In Advance:)
RanjithHi Ranjith,
There is no built in option about this behavior.
As a workaround you can create additional element with the legend outside the chart.Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.