This is a migrated thread and some comments may be shown as answers.

Label text too dense in the chart line

1 Answer 14 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Eran
Top achievements
Rank 1
Eran asked on 09 Jul 2018, 06:21 AM

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

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 10 Jul 2018, 10:42 AM
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):
categoryAxis: {
    baseUnit: "hours",
    labels:{
       rotation: "auto",
      step: 3,
      font: "9px Arial,Helvetica,sans-serif"
    }
}

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Chart
Asked by
Eran
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or