CODEWITHSUNDEEP
javascriptcsschartsdevexpressstacked-area-chart
mamcx
mamcx

Reputation: 16186

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

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"
    }
});

Upvotes: 5

Views: 1831

Answers (2)

Tip-Sy
Tip-Sy

Reputation: 808

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).

Upvotes: 1

DmitryG
DmitryG

Reputation: 17850

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.

Upvotes: 2

Related Questions