Label text too dense in the chart line

[Eran]

I'm trying to make the text label not crowded in a lot of data and I can not successful.

 

{
dataSource: modelStats,
legend: {
visible: false
},
xAxis: {
min: -2,
max: 2,
labels: {
format: "{0:n1}"
}
},
yAxis: {
labels: {
format: "{0:n2}"
}
},
series: [
{
name: "Fleet Avg",
type: "line",
aggregate: "avg",
field: "fleetAvg",
categoryField: "date",
color: "#a0b751",
},
{
name: "Driver",
type: "line",
aggregate: "avg",
field: "value",
categoryField: "date",
color: "#219dd0",
},
{
name: "Driver previous period",
type: "line",
aggregate: "avg",
field: "valueFrom_SameDateLastPeriod",
categoryField: "date",
color: "#10b4b6",
}
],
seriesDefaults: {
aggregate: "avg",
type: "line",
width: 3,
margin: 30,
markers: {
size: 15,
width: 10
}
},

categoryAxis: {
baseUnit: me.baseUnitDefault[0],
labels: {
dateFormats: {
weeks: tFormat
},
font: "13px Arial,Helvetica,sans-serif",
rotation: "auto"
},
},
tooltip: {
visible: true
},
pannable: true,
onZoom: onChartZoom,
});

[Konstantin Dikov]

Hi Eran,

A label for each data point will be rendered, so the only option for making the text in the labels visible would be to decrease the font-size, change the baseunit accordingly or set the "step" property of the labels, which determines the label rendering step (render every n-th label):

• https://dojo.telerik.com/ukIPIYor

categoryAxis: {
    baseUnit: "hours",
    labels:{
       rotation: "auto",
      step: 3,
      font: "9px Arial,Helvetica,sans-serif"
    }
}

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik