chartsdojoscatterdojox.charting

How can I add data label to dojo scatter chart?


I need an example for adding data labels to dojo scatter chart. (Not a Tooltip). these are what I found, but it didn't help

add text to dojo chart (in this case scatter chart)

http://jsfiddle.net/kpy3B/33/

require([
    "dojox/charting/Chart",
    "dojox/charting/themes/MiamiNice",
    "dojox/charting/action2d/Tooltip",
    "dojox/charting/plot2d/Bubble",
    "dojox/charting/plot2d/Markers",
    "dojox/charting/axis2d/Default",

    "dojo/domReady!"], function (Chart, theme,Tooltip) {
    var d1 = [];
    for (var i = 0; i <= 10; i += 1) {
        d1.push({
            x: i,
            y: parseInt(Math.random() * 50),
            size: parseInt(Math.random() * 10),
            tooltip: "hello:" + i,
            text: "hello:" + i
        });
        // or you can put "size:1" for simplicity
    }
    var chart = new Chart("container", {
        title: "Hello"
    });
    chart.addPlot("default", {
        type: "Bubble",
        labels: true,
        labelOffset: 20,
        htmlLabels: true
    });
    chart.addAxis("x");
    chart.addAxis("y", {
        vertical: true,
        fixLower: "major",
        fixUpper: "major"
    });

    // Add the series of data
    chart.addSeries("Demo", d1);
//chart.addSeries("Series A", [{"Hello1": { x: 83, y: 60 }}, { "Hello": //{ x: 100, y: 60 }}]);
    new Tooltip(chart, "default");
    chart.render();
});

Solution

  • You need to upgrade to dojo 1.9.7 at least to use this answer:
    First of all, You have to set a new option: "labelStyle: 'outside'". This position the text uppon the circle in case the label width is larger than than the circle.
    The next option to use is:

    labelFunc: function(value){
            return value.text;
        }
    

    This function tells the Chart which label to display.
    I updated the fiddle example: Updated JSFiddle