CODEWITHSUNDEEP
javascriptjqueryarraysc3.js
Anson Aştepta
Anson Aştepta

Reputation: 1145

C3js customize tooltip of scatter chart

I created a scatter chartlike this in the JSfiddle (http://jsfiddle.net/q8h39/102/) which is doing two dimension data analysis.

but I need to contain some extra information (e.g: custom names and a extra count value) in the chart** and give different color for each of the plots.

I tried to create an Array and use the tooltip library like this but i didn't reach the goal yet still.

    var nameArr = ['anson','jason','samson','dickson']; // Names

          tooltip: {
                format: {
                    title: function (d) { return nameArr; },  
                }
            }

Please see the JSfiddle code for further details, many thanks

The below is the current result and the exception exception after development

Current

enter image description here

Upvotes: 0

Views: 610

Answers (1)

Devendra Soni
Devendra Soni

Reputation: 1934

i have gone through the jsfiddle link and there were two issue with this:-

  1. c3js library is old
  2. c3js does not provide this functionality out of the box but you can achieve this using trick.

I have fixed both of above given issues and now it is working fine. jsfiddle:- http://jsfiddle.net/q8h39/109/

code for setting the tooltip:-

       tooltip: {
       format: {
           title: function(x) {
               var indOfVal = engagmentArr.indexOf(x);
               return nameArr[indOfVal - 1]
           },
           name: function() {
               return engagmentArr[0];
           }
       },

   },

Upvotes: 1

Related Questions