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