chart.js one of the chart from mixed chart is not plotting

Question

I am trying to create a mixed chart using chart.js. I separated my data into three different array for the plotting purpose. The sample data:

labelData: 
Ezion Led Light Bulb - Warm White 10.5w E27
Ezion Induction Cooker Ez822
Ezion Led Light Bulb - Daylight 10.5w E27
Ezion Led Light Bulb - Warm White 5.5w E27
Ezion Led Light Bulb - Warm White 7.5w E27

For the amountData, I wanted it to be in horizontalBar format. As for the quantityData, I wanted it to be in line format.

var opt = {
                            type: "horizontalBar",
                            data: { 
                                labels: labelData, 
                                datasets: [{ 
                                    label: brand,
                                    data: amountData, 
                                }, {
                                    type: 'line',
                                    label: brand,
                                    data: quantityData, 
                                }] 
                            }, 
                            options: options
                        };

The line chart is not plotting at all. Any ideas?

Thanks in advance!

EDIT PART 2

This is the part where I tried to populate my labelData array. I am pulling from firebase but for demonstration purpose, I will just put a few dummy data first:

var topProductList = [{itemName: 'Ezion Led Light Bulb - Warm White 10.5w E27'},
{itemName: 'Ezion Induction Cooker Ez822'},
{itemName: 'Ezion Led Light Bulb - Daylight 10.5w E27'},
{itemName: 'Ezion Led Light Bulb - Warm White 5.5w E27'},
{itemName: 'Ezion Led Light Bulb - Warm White 7.5w E27'}];

for(var i = 0 ; i < topProductList.length; i++){
    var itemName = topProductList[i].itemName;
    itemName = itemName.replace(/\s/g, '\n');
    labelData.push(itemName);                           
}

As suggested by @GRUNT, I am trying to replace the empty space with '\n' to format the string properly so that the chart could perform callback. However, the code above does not replace the empty space with '\n'. Here is what I obtained:

score 1 · Accepted Answer · answered Sep 21 '17 at 09:24

1

The easiest workaround would be to use a callback function (to merge the labels back) for tooltips title, as such :

tooltips: {
   callbacks: {
      title: function(t, d) {
         return d.labels[t[0].index].replace(/\n/, ' ');
      }
   }
}

but first, you should break the x-axis labels using x-axis' ticks callback function, instead of using two-dimensional labels array (as suggested on the thread you mentioned), like so :

xAxes: [{
   ticks: {
      callback: function(tick) {
         return tick.split(/\n/);
      }
   }
}]

^{* put a new-line character where you wanna break line in your label, e.g.: Jan\n2017}

ᴅᴇᴍᴏ ⧩

var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan\n2017', 'Feb\n2017', 'Mar\n2017', 'Apr\n2017', 'May\n2017'],
      datasets: [{
         label: 'LINE',
         data: [3, 1, 4, 2, 5],
         backgroundColor: 'rgba(0, 119, 290, 0.2)',
         borderColor: 'rgba(0, 119, 290, 0.6)',
         fill: false
      }]
   },
   options: {
      scales: {
         xAxes: [{
            ticks: {
               callback: function(tick) {
                  return tick.split(/\n/);
               }
            }
         }],
         yAxes: [{
            ticks: {
               beginAtZero: true,
               stepSize: 1
            }
         }]
      },
      tooltips: {
         callbacks: {
            title: function(t, d) {
               return d.labels[t[0].index].replace(/\n/, ' ');
            }
         }
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

answered Sep 21 '17 at 09:24

ɢʀᴜɴᴛ

32,025
15
116
110

@GRUNT I tried to replace empty space to \n by using this when populating my labelData but it does not seems to work. var itemName = topProductList[i].itemName; itemName = itemName.split(" ").join("\n"); labelData.push(itemName); Any ideas? – QWERTY Sep 21 '17 at 10:02
can you maybe create a fiddle *(just for the populating part)* ? tho you can directly use *replace* instead of *split* + *join*, like this - `itemName.replace(/\s/g, '\n')` – ɢʀᴜɴᴛ Sep 21 '17 at 10:28
@GRUNT Hey I have updated the question. Please take a look at edit part 2! :) I printed out the result, each character is actually in the next line which means the replace is working. But somehow the chart looks like the screenshot above – QWERTY Sep 21 '17 at 10:51
hm.. but I see its working. see [here](https://jsfiddle.net/r25c4jwu/1/) *(tho you probably don't wanna replace all spaces with new line)* – ɢʀᴜɴᴛ Sep 21 '17 at 11:14
I see I see it works! But is there any way to maybe set some width for the x-axis label rather than replace all spaces with new line in this case? Because I not sure what will be the data as it is dynamic, so I can't really hardcode the '\n' itself. – QWERTY Sep 21 '17 at 11:20
I tried to count the character and split into new line. But sometimes it resulting in something like Ch\narger :( – QWERTY Sep 21 '17 at 11:26
@GRUNT In regard to the second question above, let me open up a new thread! I have been researching for the past few hours but I just could not get it work :( – QWERTY Sep 21 '17 at 11:35
@GRUNT https://stackoverflow.com/questions/46343094/chart-js-tooltip-hover-customization-for-mixed-chart Please take a look when you free! – QWERTY Sep 21 '17 at 11:44

chart.js one of the chart from mixed chart is not plotting

1 Answers1