Search code examples
javascriptjquerychartslinechartshieldui

How to add custom labels in a Shield UI JavaScript line chart

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>

Solution

  • You can use a format function or modify the text directly for any given point. More on this is available in the following topic:

    https://www.shieldui.com/documentation/components/javascript/shieldui.chart/api/seriesSettings/line/dataPointText/format