How to add custom labels in a Shield UI JavaScript line chart
Question
The code which I used for plotting the Shield UI line chart is shown below. On hovering over each dots, I am able to get the labels (Right/Wrong). But I need to show the labels (Right/Wrong) printed on the chart in place of data values like 4,0,1,2,3,4 etc.
$(function() { $("#chart").shieldChart({ chartAreaBorderColor: '#E8E8E8', theme: 'dark', chartAreaBorderWidth: 1, primaryHeader: { text: "Quiz Attendance" }, exportOptions: { image: false }, seriesSettings: { line: { dataPointText: { enabled: true, style: { fontWeight: "bold" } } } }, tooltipSettings: { customHeaderText: "Your answer was:", customPointText: function(point, chart) { return shield.format( '<span><b>{value}</b></span>', { value: point.pointName } ); } }, axisY: { min: 0, max: 4 // four levels max }, axisX: { categoricalValues: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8', 'Q9', 'Q10', 'Q11', 'Q12', 'Q13', 'Q14', 'Q15', 'Q16'] }, dataSeries: [{ seriesType: 'line', color: "#FFD500", collectionAlias: 'Your quiz attendance', data: [{ y: 4, pointName: "Right" }, { y: 0, pointName: "Right" }, { y: 1, pointName: "Right" }, { y: 2, pointName: "Right" }, { y: 3, pointName: "Right" }, { y: 4, pointName: "Right" }, { y: 3, pointName: "Wrong" }, { y: 2, pointName: "Wrong" }, { y: 1, pointName: "Wrong" }, { y: 0, pointName: "Wrong" }, { y: 1, pointName: "Right" }, { y: 2, pointName: "Right" }, { y: 3, pointName: "Right" }, { y: 4, pointName: "Right" }, { y: 4, pointName: "Right" }, { y: 3, pointName: "Wrong" }] }] }); });
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Altoopa Research and Concepts Private Limited</title> <link id="themecss" rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/light-bootstrap/all.min.css" /> <script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/chart/js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/chart/js/shield-chart.all.min.js"></script> </head> <body> <div style="width: 960px; min-height: 500px; margin: 0 auto;"> <div id="chart"></div> </div> </body> </html>
1 answers
solution1
1 ACCPTED 2015-06-24 08:56:25
You can use a format function or modify the text directly for any given point. More on this is available in the following topic:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to add labels to javascript chart
Dynamically changing the type of a Shield UI JavaScript chart
Adjusting the appearance of a javascript- Shield UI Chart
How to create a custom column line chart with custom value and axis labels in javascript?
Adjusting the axisMarker mode for the Shield UI Line Polar chart
Specifying Shield UI JavaScript Chart series color, based on user preferences
Keeping Shield UI JavaScript chart data series always visible
Asynchronous Shield UI JavaScript Chart creation and data binding
Adjusting Shield UI JavaScript chart when NULL values are present
Setting up the Shield UI JavaScript Chart Stacking mode property
Related Tags