I want to add a custom value in tooltip in chart type bubble

[Alvaro]

I have this javascript code:

var data = CreateData(params);

var chart = new ej.charts.Chart({

    primaryXAxis: {

        title: 'Ocurrencia Temporal',

        valueType: 'Category',

        enableTrim: false

    },

    primaryYAxis: {

        title: 'Impacto (%)',

        minimum: 0,

        maximum: 100,

        interval: 10,

        minorTickLines: { width: 0 },

        majorTickLines: { width: 0 },

        crossesAt: 0,

        minorTicksPerInterval: 3

    },

    width: ej.base.Browser.isDevice ? '100%' : '100%',

    series: [

        {

            type: 'Bubble',

            dataSource: data,

            minRadius: 0,

            maxRadius: ej.base.Browser.isDevice ? 8 : 10,

            xName: 'x',

            yName: 'y',

            size: 'size',

            opacity: 0.6,

            marker: {

                dataLabel:

                    {

                        name: 'text'

                    }

            }

        },

    ],

    pointRender: labelRender,

    title: 'Calendario Estratégico Regulación',

    tooltip: {

        enable: true,

        header: '<b>${point.text}</b>',

        format: 'Impacto: <b>${point.y}%</b>' +

            '<br />Estimacion Económica: <b>${point.valor}(MUSD)</b>' +

            '<br />Ocurrencia Temporal: <b>${point.x}</b>'

    },

    legendSettings: { visible: true }

});

how can I add a custom value named "valor", this part of code

'<br />Estimacion Económica: <b>${point.valor}(MUSD)</b>' +

render literally as ${point.valor}(MUSD)

 Im building my data source object like this

     function CreateData(parameters) {

            var data = *** this part get data from backend by para***

            var arr = new Array();

            for (i = 0; i < data.result.length; i++) {

                var _form = new Object();

                var customValue = data.result[i].CustomValue;

                _form.TaskID = data.result[i].Id;

                _form.text = data.result[i].Evento + " - " + data.result[i].Name;

                _form.Pound = data.result[i].Evento;

                _form.x = impactos.filter(x => x.Id == data.result[i].ImpactoId).map(x => x.Name)[0];

                _form.y = data.result[i].ProbabilidadValor;

                _form.size = Valor;

                _form.valor = customValue; // i want to print this value

                arr.push(_form);

            }

            return arr;

        }

please help me :C 

[Durga Gopalakrishnan]

Hi Alvaro, 

 

Greetings from Syncfusion. 

 

We suggest you use tooltipMappingName to display custom text for tooltip. We have prepared sample as per and attached for your reference.  

 

var chart = new ej.charts.Chart({ 

    series: [ 

         { 

          tooltipMappingName: "valor", 

          dataSource: [ 

                  { x: 92.2, y: 7.8, valor: "10" }, 

                  //… 

          ], 

        } 

    ], 

    tooltip: { 

        format: "Estimation : <b>${point.tooltip}(MUSD)</b>" 

    } 

}); 

chart.appendTo("#bubble-container"); 

 

 

Screenshot :  

 

 

 

Sample : https://stackblitz.com/edit/um4dj8 

Regards, 

Durga G 

[Alvaro]

thx a lot, it work perfect, you responded very quickly, 

so what about if i needed add 3 new values to the tooltip, which would be the way?

[Srihari Muthukaruppan]

Hi Alvaro, 

 

We have analysed your query. We can achieve your requirement using tooltipRender event. Based on your requirement we have prepared a sample for your reference. Please find the sample and screenshot below. 

 

Sample: https://stackblitz.com/edit/um4dj8-vnqlzw 

 

Screenshot: 

 

Let us know if you have any concerns. 

 

Regards, 

Srihari M