c3js / c3

:bar_chart: A D3-based reusable chart library
http://c3js.org
MIT License
9.34k stars 1.39k forks source link

donut chart custom title on hover #2224

Open nadeem1990 opened 6 years ago

nadeem1990 commented 6 years ago

Hi, My requirement is display short name on donut chart and on hover title display full length text which is present in mMinorNameFull array, tried alot of thing, same code as below for custom title on hover is working fine on bar chart but giving null as value of d in donut chart, please find below complete code : `function LegislationWiseOP(Table) { //var mData = [], mItem = [], mMinorIdData = [], mMinorIdItem = [], mTotalCnt = 0;//COmmented by Nadeem on 06Oct17 var mData = [], mItem = [], mMinorIdData = [], mMinorIdItem = [], mTotalCnt = 0, mMinorNameFull = [];//Added by Nadeem on 06Oct17

        if (Table[0] == null)//Added by Nadeem on 29May17
            mTotalCnt = 0;
        else
            mTotalCnt = Table[0].TotCnt;

        $('#LegWiseOpenProcTotal').text(mTotalCnt);

        for (var i = 0; i < Table.length; i++) {
            mItem = [], mMinorIdItem = [];

            mItem.push(Table[i].MinorName, Table[i].Perc);
            mData.push(mItem);
            //alert(Table[i].MinorNameFull);
            mMinorNameFull.push(Table[i].MinorNameFull);//Added by Nadeem on 06Oct17

            mMinorIdItem.push(id = Table[i].MinorName, value = Table[i].MinorId);

            mMinorIdData.push(mMinorIdItem);
        }

        var chart = c3.generate({
            bindto: '#chart2',
            data: {
                columns: mData,
                type: 'donut',

                onclick: function (d, i) {
                    for (var i = 0; i < mMinorIdData.length; i++) {
                        if (mMinorIdData[i][0] == d.id)
                            openRadWindow("LegWisePenProc", "", mMinorIdData[i][1], "", mMinorIdData[i][0], "");
                    }
                },
                //onmouseover: function (d, i) { console.log("onmouseover", mMinorNameFull, i); },
            }
             , tooltip: {
                 format: {
                     title: function (d) {
                         return mMinorNameFull[d]
                     }
                 }
             }
            ,
            color: {
                pattern: ['#336799', '#01A3AE', '#80D1D5', '#FEE506', '#2C973D']
            },
            legend: {
                position: 'right',
            },
            donut: {
                title: ""
            }

}); }`

nadeem1990 commented 6 years ago

Still struggling with the issue, please help, I have tried this

prtome commented 6 years ago

Hello, did you find a solution ? in the doc there is the following, but returns x undefined for donut chart. Is there a way to change the title ? how to get x ?

   tooltip: {
       format: {
           title: function (x) { return 'Data ' + x; }
   }

}