How to set the placement of labels so that they do not overlap in the DevExpress js diagram?

Question

I need to put labels on all my charts. But labels overlap for chart density. I am applying a sample.

I need to separate them. How?

I have not modified CSS lib. Using the latest version.

This is an example of code that can be inserted at 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" } }); 

Answer 1

When playing with jQuery and an SVG diagram, you can 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 into the console (with Chrome it works like a charm).

Answer 2

I’m afraid that it’s not possible to show all the labels at once in your case due to the high density of the labels.

Using the customizeText callback function may be a solution to reducing label density by hiding some labels. The main idea is to return an empty string if the 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; } } }, 

In any case, you should monitor the progress of DevExpress in the implementation of a ready-made solution for overlapping labels on the label in the context of Graphics - to provide an opportunity to get rid of overlapping serial labels .