CODEWITHSUNDEEP
javascriptjquerychartschart.js
dungey_140
dungey_140

Reputation: 2802

Append suffix to Chart.js dataset?

I'm using Chart.js to display data on my site, and would like to append a suffix to the data fields, to indicate that they are in grams (g). I can't find anything in the documentation that seems to help, but it seems like quite a simple feature.

For example, I'd like to ensure that data displays as 32g, 38g, 53g, rather than just 32, 38, 53. You can't simply add it into the array as this is required as numbers only to generate the chart.

PHP

$myChart = array(
    "type" => "doughnut",
    "data" => array(
        "labels" => ['Label1', 'Label2', 'Label3'],
        "datasets" => [
            array(
                "data" => [ 32, 38, 53 ],
            )
        ]
    )
);

HTML

<div class="chart" data-charts="{"type":"doughnut","data":{"labels":["Label1","Label2","Label3"],"datasets":[{"data":["56","31","21"],}]}}">
    <div class="chart-container">
        <canvas class="chartjs-render-monitor">
        </canvas>
    </div>
</div>

JQUERY

// Chart init
window.onload = function() {

    // Find all charts
    var containers = document.querySelectorAll('.chart');

    // For each chart
    containers.forEach(function(container) {

        // Parse data
        var charts = JSON.parse(container.dataset.charts);

        // Add container div
        var div = document.createElement('div');
        div.classList.add('chart-container');

        // Add canvas for chart to be drawn in
        var canvas = document.createElement('canvas');

        // Append new elements
        div.appendChild(canvas);
        container.appendChild(div);

        // Config
        var ctx = canvas.getContext('2d');
        var config = charts;

        // Init chart
        var myChart = new Chart(ctx, config);

    });
};

Upvotes: 2

Views: 2181

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337713

To make this work you can use the callback of the tooltips configuration to append a string to the value in the dataset, something like this:

var containers = document.querySelectorAll('.chart');
containers.forEach(function(container) {
  var charts = JSON.parse(container.dataset.charts);

  var div = document.createElement('div');
  div.classList.add('chart-container');

  var canvas = document.createElement('canvas');
  div.appendChild(canvas);
  container.appendChild(div);

  var ctx = canvas.getContext('2d');
  var config = charts;
  var myChart = new Chart(ctx, $.extend(config, {
    options: {
      tooltips: {
        enabled: true,
        mode: 'single',
        callbacks: {
          label: function(tooltipItems, data) {
            return data.datasets[0].data[tooltipItems.index] + 'g';
          }
        }
      }
    }
  }));
});
canvas {
  background-color: #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<div class="chart" data-charts='{"type":"doughnut","data":{"labels":["Label1","Label2","Label3"],"datasets":[{"data":["56","31","21"]}]}}'></div>

Upvotes: 1

Related Questions