I am creating a bo chart with Chart.JS and it is a bar/line bo. The labels for dataset[0] I want to show with a % sign and the labels for dataset[1] I want to show with a $ sign. Now when I refer to labels I mean what displays when you hover over the bar/line and it displays the info. I attempted the below syntax, but this will not even have a chart display (I altered my code to add an if statement to try to account for dataset[0] & dataset[1])

What would be the proper way to have dataset[0] show a % sign and dataset[1] show a $ sign?

        var labelsarr = ["Red 12", "Red 13", "Yellow 12", "Yellow 13", "Blue 12", "Blue 13"],
    ;

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labelsarr,
                    datasets: [{
                            type: 'line',
                            fill: false,
                            label: 'Percent',
                            backgroundColor: 'rgba(255,0,0,1)',
                            borderColor: 'rgba(255,0,0,1)',
                            data: [3, 4, 10, 5, 8, 7],
                        }, {}
                        data: [12, 19, 3, 5, 2, 3],
                        label: 'Total Revenue',
                        backgroundColor: 'rgba(0, 129, 214, 0.8)',
                    }]
            },
            options: {
                tooltips: {
                    callbacks: {
                        if (chart.data.datasets = [1]) {
                            label: function(t, d) {
                                var xLabel = d.datasets[t.datasetIndex].label;
                                var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
                                return xLabel + ': ' + yLabel;
                            }
                        }
                        if (chart.data.datasets = [0]) {
                            label: function(value) {
                                return value + "%"
                            }
                        }
                    }
                }
            },
            legend: {
                display: false,
                position: 'top',
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        callback: function(value, index, values) {
                            if (parseInt(value) >= 1000) {
                                return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            } else {
                                return '$' + value;
                            }
                        }
                    }
                }]
            }
        },
        plugins: [{
            beforeDraw: function(chart) {
                var labels = chart.data.labels;
                labels.forEach(function(e, i) {
                    var bar = chart.data.datasets[1]._meta[0].data[i]._model;
                    var dataPoint = e.split(/\s/)[1];
                    if (dataPoint === '12')
                        bar.backgroundColor = 'blue';
                    else if (dataPoint === '13')
                        bar.backgroundColor = 'orange';
                });
            }
        }]
    });

I am creating a bo chart with Chart.JS and it is a bar/line bo. The labels for dataset[0] I want to show with a % sign and the labels for dataset[1] I want to show with a $ sign. Now when I refer to labels I mean what displays when you hover over the bar/line and it displays the info. I attempted the below syntax, but this will not even have a chart display (I altered my code to add an if statement to try to account for dataset[0] & dataset[1])

What would be the proper way to have dataset[0] show a % sign and dataset[1] show a $ sign?

        var labelsarr = ["Red 12", "Red 13", "Yellow 12", "Yellow 13", "Blue 12", "Blue 13"],
    ;

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labelsarr,
                    datasets: [{
                            type: 'line',
                            fill: false,
                            label: 'Percent',
                            backgroundColor: 'rgba(255,0,0,1)',
                            borderColor: 'rgba(255,0,0,1)',
                            data: [3, 4, 10, 5, 8, 7],
                        }, {}
                        data: [12, 19, 3, 5, 2, 3],
                        label: 'Total Revenue',
                        backgroundColor: 'rgba(0, 129, 214, 0.8)',
                    }]
            },
            options: {
                tooltips: {
                    callbacks: {
                        if (chart.data.datasets = [1]) {
                            label: function(t, d) {
                                var xLabel = d.datasets[t.datasetIndex].label;
                                var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
                                return xLabel + ': ' + yLabel;
                            }
                        }
                        if (chart.data.datasets = [0]) {
                            label: function(value) {
                                return value + "%"
                            }
                        }
                    }
                }
            },
            legend: {
                display: false,
                position: 'top',
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        callback: function(value, index, values) {
                            if (parseInt(value) >= 1000) {
                                return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            } else {
                                return '$' + value;
                            }
                        }
                    }
                }]
            }
        },
        plugins: [{
            beforeDraw: function(chart) {
                var labels = chart.data.labels;
                labels.forEach(function(e, i) {
                    var bar = chart.data.datasets[1]._meta[0].data[i]._model;
                    var dataPoint = e.split(/\s/)[1];
                    if (dataPoint === '12')
                        bar.backgroundColor = 'blue';
                    else if (dataPoint === '13')
                        bar.backgroundColor = 'orange';
                });
            }
        }]
    });

• javascript
• jquery
• chart.js

Share Improve this question Follow edited Jul 30, 2017 at 21:40 Itchydon 2,59666 gold badges2323 silver badges3535 bronze badges asked Jul 30, 2017 at 17:22 IcyPopTartsIcyPopTarts 50422 gold badges1414 silver badges2626 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Use the following tooltips callback function :

callbacks: {
   label: function(t, d) {
      if (t.datasetIndex === 0) {
         var xLabel = d.datasets[t.datasetIndex].label;
         var yLabel = t.yLabel + '%';
         return xLabel + ': ' + yLabel;
      } else if (t.datasetIndex === 1) {
         var xLabel = d.datasets[t.datasetIndex].label;
         var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
         return xLabel + ': ' + yLabel;
      }
   }
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

var labelsarr = ["Red 12", "Red 13", "Yellow 12", "Yellow 13", "Blue 12", "Blue 13"];

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: labelsarr,
      datasets: [{
         type: 'line',
         fill: false,
         label: 'Percent',
         backgroundColor: 'rgba(255,0,0,1)',
         borderColor: 'rgba(255,0,0,1)',
         data: [3, 4, 10, 5, 8, 7],
      }, {
         data: [12, 19, 3, 5, 2, 3],
         label: 'Total Revenue',
         backgroundColor: 'rgba(0, 129, 214, 0.8)',
      }]
   },
   options: {
      tooltips: {
         callbacks: {
            label: function(t, d) {
               if (t.datasetIndex === 0) {
                  var xLabel = d.datasets[t.datasetIndex].label;
                  var yLabel = t.yLabel + '%';
                  return xLabel + ': ' + yLabel;
               } else if (t.datasetIndex === 1) {
                  var xLabel = d.datasets[t.datasetIndex].label;
                  var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
                  return xLabel + ': ' + yLabel;
               }
            }
         }
      },
      legend: {
         display: false,
         position: 'top',
      },
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true,
               callback: function(value, index, values) {
                  if (parseInt(value) >= 1000) {
                     return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                  } else {
                     return '$' + value;
                  }
               }
            }
         }]
      }
   },
   plugins: [{
      beforeDraw: function(chart) {
         var labels = chart.data.labels;
         labels.forEach(function(e, i) {
            var bar = chart.data.datasets[1]._meta[0].data[i]._model;
            var dataPoint = e.split(/\s/)[1];
            if (dataPoint === '12')
               bar.backgroundColor = 'blue';
            else if (dataPoint === '13')
               bar.backgroundColor = 'orange';
         });
      }
   }]
});

<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

some syntax issues have been fixed, look for those carefully.