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

Label text too dense in the chart line

1 Answer 120 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Eran
Top achievements
Rank 1
Eran asked on 09 Jul 2018, 10:25 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
Tsvetina
Telerik team
answered on 10 Jul 2018, 03:11 PM
Hi Eran,

How would you like to resolve the labels crowding problem—do you want to show fewer labels or change the way they are displayed? The simplest solution is to decrease the number of labels displayed in the Chart by setting the labels step property.
Here is an example, which you can take a look at:
https://dojo.telerik.com/evayIfAh

If you want all labels to be shown and customize their look to improve their look, please explain what appearance exactly you are looking to achieve.

Regards,
Tsvetina
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
Charts
Asked by
Eran
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or