How fix labels placement so them not overlap in DevExpress js chart?

Question

I need to put labels to all my charts. But the labels overlap for the density of the chart. I attach a sample.

I need to separate them. How?

I don't have modified the CSS of the lib. Using last version.

This is a sample code, can be pasted on http://js.devexpress.com/Demos/VizGallery/#chart/chartsareaseriesarea:

var labelPercent = {
    visible: true,
    format: 'percent',
    precision: 1,
};


var dataSource = [
    {
        "Aeropuertos": 0.003, 
        "AguaFacilidades": 0.016, 
        "CallesPuentes": 0.183, 
        "ConstruccionResidencialNO": 0.542, 
        "PetroleoGas": 0.071, 
        "PlantasEnergia": 0.11, 
        "PuertosFluviales": 0.052, 
        "ViasFerreas": 0.023, 
        "Year": "2011"
    }, 
    {
        "Aeropuertos": 0.01, 
        "AguaFacilidades": 0.019, 
        "CallesPuentes": 0.19, 
        "ConstruccionResidencialNO": 0.542, 
        "PetroleoGas": 0.079, 
        "PlantasEnergia": 0.09, 
        "PuertosFluviales": 0.029, 
        "ViasFerreas": 0.04, 
        "Year": "2012"
    }, 
    {
        "Aeropuertos": 0.01, 
        "AguaFacilidades": 0.019, 
        "CallesPuentes": 0.191, 
        "ConstruccionResidencialNO": 0.541, 
        "PetroleoGas": 0.082, 
        "PlantasEnergia": 0.088, 
        "PuertosFluviales": 0.029, 
        "ViasFerreas": 0.04, 
        "Year": "2013"
    }, 
    {
        "Aeropuertos": 0.009, 
        "AguaFacilidades": 0.019, 
        "CallesPuentes": 0.19, 
        "ConstruccionResidencialNO": 0.539, 
        "PetroleoGas": 0.085, 
        "PlantasEnergia": 0.085, 
        "PuertosFluviales": 0.029, 
        "ViasFerreas": 0.042, 
        "Year": "2014E"
    }, 
    {
        "Aeropuertos": 0.009, 
        "AguaFacilidades": 0.018, 
        "CallesPuentes": 0.191, 
        "ConstruccionResidencialNO": 0.536, 
        "PetroleoGas": 0.09, 
        "PlantasEnergia": 0.084, 
        "PuertosFluviales": 0.029, 
        "ViasFerreas": 0.043, 
        "Year": "2015E"
    }, 
    {
        "Aeropuertos": 0.009, 
        "AguaFacilidades": 0.017, 
        "CallesPuentes": 0.192, 
        "ConstruccionResidencialNO": 0.529, 
        "PetroleoGas": 0.096, 
        "PlantasEnergia": 0.084, 
        "PuertosFluviales": 0.028, 
        "ViasFerreas": 0.044, 
        "Year": "2016E"
    }, 
    {
        "Aeropuertos": 0.009, 
        "AguaFacilidades": 0.017, 
        "CallesPuentes": 0.195, 
        "ConstruccionResidencialNO": 0.521, 
        "PetroleoGas": 0.102, 
        "PlantasEnergia": 0.084, 
        "PuertosFluviales": 0.028, 
        "ViasFerreas": 0.045, 
        "Year": "2017E"
    }, 
    {
        "Aeropuertos": 0.009, 
        "AguaFacilidades": 0.016, 
        "CallesPuentes": 0.196, 
        "ConstruccionResidencialNO": 0.514, 
        "PetroleoGas": 0.108, 
        "PlantasEnergia": 0.084, 
        "PuertosFluviales": 0.028, 
        "ViasFerreas": 0.045, 
        "Year": "2018E"
    }, 
    {
        "Aeropuertos": 0.009, 
        "AguaFacilidades": 0.015, 
        "CallesPuentes": 0.197, 
        "ConstruccionResidencialNO": 0.508, 
        "PetroleoGas": 0.115, 
        "PlantasEnergia": 0.083, 
        "PuertosFluviales": 0.027, 
        "ViasFerreas": 0.046, 
        "Year": "2019E"
    }, 
    {
        "Aeropuertos": 0.008, 
        "AguaFacilidades": 0.014, 
        "CallesPuentes": 0.198, 
        "ConstruccionResidencialNO": 0.501, 
        "PetroleoGas": 0.123, 
        "PlantasEnergia": 0.082, 
        "PuertosFluviales": 0.027, 
        "ViasFerreas": 0.047, 
        "Year": "2020E"
    }, 
    {
        "Aeropuertos": 0.008, 
        "AguaFacilidades": 0.014, 
        "CallesPuentes": 0.199, 
        "ConstruccionResidencialNO": 0.493, 
        "PetroleoGas": 0.132, 
        "PlantasEnergia": 0.08, 
        "PuertosFluviales": 0.027, 
        "ViasFerreas": 0.047, 
        "Year": "2021E"
    }, 
    {
        "Aeropuertos": 0.008, 
        "AguaFacilidades": 0.013, 
        "CallesPuentes": 0.199, 
        "ConstruccionResidencialNO": 0.485, 
        "PetroleoGas": 0.141, 
        "PlantasEnergia": 0.079, 
        "PuertosFluviales": 0.026, 
        "ViasFerreas": 0.048, 
        "Year": "2022E"
    }
];

$("#container").dxChart({
    dataSource: dataSource,
    commonSeriesSettings: {
        type: "fullStackedArea",
        argumentField: "Year"
    },
    series: [
        {
            valueField: 'CallesPuentes',
            name: 'Calles y puentes',
            label: labelPercent,
        },
        {
            valueField: 'ViasFerreas',
            name: 'Vías ferreas',
            label: labelPercent,
        },
        {
            valueField: 'Aeropuertos',
            name: 'Aeropuertos',
            label: labelPercent,
        },
        {
            valueField: 'PuertosFluviales',
            name: 'Puertos - Vías fluviales',
            label: labelPercent,
        },
        {
            valueField: 'PetroleoGas',
            name: 'Petróleo y gas',
            label: labelPercent,
        },
        {
            valueField: 'PlantasEnergia',
            name: 'Plantas de energía',
            label: labelPercent,
        },
        {
            valueField: 'AguaFacilidades',
            name: 'Agua y facilidades sanitarias',
            label: labelPercent,
        },
        {
            valueField: 'ConstruccionResidencialNO',
            name: 'Construcción Residencial y No Residencial',
            label: labelPercent,
        }
    ],
    title: "Test",
    argumentAxis:{
        valueMarginsEnabled: false
    },
        tooltip: {
            enabled: true,
        },  
    valueAxis:[{
        grid: {
            visible: true
        }
    },
    {
        min: 0,
        name: 'valueAxis',
        position: 'right',
        grid: {
            visible: true
        },
    },
    {
        min: 0,
        name: 'valueAxis2',
        position: 'right',
        grid: {
            visible: true
        },
    }],
    legend: {
        verticalAlignment: "bottom",
        horizontalAlignment: "center"
    }
});

score 2 · Answer 1 · answered Oct 31 '14 at 07:30

I'm afraid it is not possible to show all labels at the same time in your case due to high labels density.

The using of the customizeText callback function can be a solution of decreasing labels density via hiding some labels. The main idea is to return an empty string when a value does not meet your requirements (for example: less than 5%).

commonSeriesSettings: {
    type: "fullStackedArea",
    argumentField: "Year",
    label: {
        visible: true,
        format: 'percent',
        precision: 1,
        customizeText: function(arg) {
            if (arg.value < 0.05)
              return "";
            return arg.valueText;
        }
    }
},

Anyway, you should track the DevExpress progress in implementing of out-of-the-box label-overlapping resolving in the context of the Charts - Provide the capability to get rid of overlapping series labels ticket.

Tip-Sy · Accepted Answer · 2014-11-06T21:46:00.373

By playing with jQuery and the SVG chart, you could do something like this:

// Reduce the rectangle background of each label
$(".dxc-labels-group rect").attr("x", "-16");
$(".dxc-labels-group rect").attr("y", "-12");
$(".dxc-labels-group rect").attr("width", "32");
$(".dxc-labels-group rect").attr("height", "15");

// Reduce the font-size of each label:
$(".dxc-labels-group rect + text").css("font-size", "11px");


// Separate the labels by moving up/down some of them
$.each($(".dxc-labels-group .dxc-labels > g > g[transform]"), function(i, elm) {

    // 1) Save the original Y coord of the label
    var translateY = $(elm).attr("transform").match(/translate\(\d{1,4},(\d{1,4})\)/);

    if(translateY && translateY[1]) {

        // 2) Move up/down the label according to its color
        switch($(elm).children("rect").attr("fill")) {

            // 3/ For example, move up the blue ones
            case "#91bdc7":
                var move = 30;  // Move up
                var transform = $(elm).attr("transform").replace(/(translate\(\d{1,4},)(\d{1,4})(\))/, "$1"+(translateY[1]-move)+"$3");
                $(elm).attr("transform", transform);
                break;

            // Do similar things for other colors...
        }
    }
});

To run this code, copy/paste it in the console (with Chrome it works like a charm).

I try this and don't see any change on the chart. The sizes of .dxc-labels-group stay the same. — mamcx, Nov 07 '14 at 17:10
Have you added this code in the console of Chrome (F12) and press Enter? It doesn't work if you copy/paste it in the area of your chart code. — Tip-Sy, Nov 07 '14 at 20:54
I change to alternate the var move in each pass (move * -1) and it work, so I award the price. — mamcx, Nov 07 '14 at 22:59
Good idea, it's one of the possibilities. Thanks for the bounty! — Tip-Sy, Nov 08 '14 at 13:11

How fix labels placement so them not overlap in DevExpress js chart?

2 Answers2