jQWidgets Forums
jQuery UI Widgets › Forums › Chart › How to change the label position on a line chart? And font color?
This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 11 years, 10 months ago.
-
Author
-
Hi,
I met some issues of label position on line chart.
There are two lines on the chart and I want to set them with different label positions.
For one line, I just use the default setting, so the label will appear on the right-bottom of the data point.
For the other line, I want to let the label appear on the left-bottom.So according the API-reference, I change the labelsOffset property in series.
I used the following code. However, it does not work. Any idea what’s wrong with it?
Besides this, I wonder is there a way to change the label font color for a line in a chart?var settings = {
title: “Bugs in JIRA (Status)”,
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 25, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
categoryAxis:
{
textRotationAngle: 330,
dataField: ‘updated_at’,
formatFunction: function (value) {
yearval = value.substring(26, 30);
monthtxt = value.substring(4, 7);
dateval = value.substring(8, 10);
monthlist = [‘Jan’,’Feb’,’Mar’,’Apr’,’May’,’Jun’,’Jul’,’Aug’,’Sep’,’Oct’,’Nov’,’Dec’];
for (i=0;i<monthlist .length;i++) {
if (monthlist[i] == monthtxt)
break;
}
monthval = i+1;
timestr = zeroize(monthval) + "/" + dateval + "/" + yearval;
return timestr;
//return value.substring(4, 10);
},
showTickMarks: true,
valuesOnTicks: false,
tickMarksInterval: 1,
tickMarksColor: '#888888',
unitInterval: 1,
gridLinesInterval: 1,
gridLinesColor: '#888888',
axisSize: 'auto'
},
colorScheme: 'scheme06',
seriesGroups:
[
{
type: 'line',
showLabels: true,
symbolType: 'circle',
valueAxis:
{
unitInterval: UIVal,
minValue: 0,
maxValue: UIMax,
description: '#Num',
axisSize: 'auto',
tickMarksColor: '#888888',
formatFunction: function (value) {
return parseInt(value);
}
},
series: [
{ dataField: 'open', displayText: 'Open', color: '#727272', labelsOffset: {x: -50, y: 0}, formatFunction: function (value) {if (value <= 0) return ""; return value;} },
{ dataField: 'close', displayText: 'Closed', color: '#79C36A', formatFunction: function (value) {if (value <= 0) return ""; return value;} }
]
}
]
};Hello czk1985,
The name of the property is labelOffset. It was mistyped in the API Documentation. We are sorry for the inconvenience.
To change the font of the labels, please change the css of the class jqx-chart-label-text.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks for the answer, Dimitar.
So all the labels on the charts are controlled by a global property.
For the time being, it is not supported to realize the effect of different fonts on same line chart. Is this correct?Hi czk1985,
Yes, you are correct. The only possible workaround is to make a jQuery selection of only the labels of particular series. Here is an example based on the demo Stacked Area Series:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.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/jqxchart.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var source = { datatype: "tab", datafields: [ { name: 'Date' }, { name: 'Referral' }, { name: 'SearchPaid' }, { name: 'SearchNonPaid' } ], url: '../sampledata/website_analytics.txt' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); // prepare jqxChart settings var settings = { title: "Web Traffic Analysis", description: "Unique site visitors in January 2012", enableAnimations: true, showLegend: true, padding: { left: 10, top: 5, right: 10, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: dataAdapter, categoryAxis: { text: 'Category Axis', textRotationAngle: 0, dataField: 'Date', formatFunction: function (value) { return value.getDate(); }, toolTipFormatFunction: function (value) { var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; return value.getDate() + '-' + months[value.getMonth()]; }, type: 'date', baseUnit: 'day', showTickMarks: true, tickMarksInterval: 1, tickMarksColor: '#888888', unitInterval: 1, showGridLines: true, gridLinesInterval: 3, gridLinesColor: '#888888', valuesOnTicks: true }, colorScheme: 'scheme03', seriesGroups: [ { type: 'stackedarea', showLabels: true, valueAxis: { unitInterval: 500, minValue: 0, maxValue: 3000, displayValueAxis: true, description: 'Daily visitors', //descriptionClass: 'css-class-name', axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'SearchNonPaid', displayText: 'Non-Paid Search Traffic' }, { dataField: 'SearchPaid', displayText: 'Paid Search Traffic' }, { dataField: 'Referral', displayText: 'Referral Traffic' } ] } ] }; // setup the chart $('#jqxChart').jqxChart(settings); setTimeout(function () { var labels = $("#jqxChart .jqx-chart-label-text"); for (var i = 0; i < dataAdapter.records.length; i++) { $("#jqxChart .jqx-chart-label-text:eq(" + i + ")").css("font-weight", "bold"); }; }, 1000); }); </script></head><body class='default'> <div id='jqxChart' style="width: 680px; height: 400px"> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.