Mastering Font Utilization in Angular Charts

Textual components are essential for enhancing the readability and understanding of information in charts. Every kind of textual content serves a definite function, enhancing the general readability and effectiveness of the chart. Through the use of customizable APIs, you possibly can tailor these components to satisfy particular consumer wants.

Syncfusion Angular Charts is a well-crafted charting element for information visualization. It incorporates a wealthy UI gallery of fifty+ charts and graphs, starting from line to monetary, that cater to all charting situations. Its excessive efficiency helps render giant quantities of information shortly. 

On this weblog submit, we’ll see methods to grasp font utilization within the Syncfusion Angular Charts for higher visualization and readability.

The function of fonts

Fonts do greater than convey textual content; they play a key function in making your information clear and understandable. Selecting the best fonts and using them successfully can considerably affect how your charts are interpreted.

Good font use helps spotlight necessary data, enhances readability, and offers your chart an expert look. This information provides simple methods for choosing and making use of fonts in your charts, making certain they’re each engaging and simple to learn.

Instance: Think about a chart that illustrates world employment in renewable vitality applied sciences for 2022. The textual content is styled with default measurement, font kinds and household.

To boost magnificence and readability in charts, choose fonts which might be each clear and visually balanced. Use a daring, bigger font for titles to emphasise key data, and go for smaller, lighter fonts for labels and axis descriptions to keep up readability with out distraction.

Title and subtitles

A chart title ought to clearly convey its content material, offering viewers with fast insights into the introduced information. It must be in daring font to boost readability and visibility.

The subtitle provides context to the title, together with particulars such because the interval coated, the info supply, and a quick rationalization of the chart’s function. It must be displayed in a barely much less daring font than the title to keep up readability whereas differentiating its function.

For instance, the title might be formatted with a font measurement of 16px, weight 600, utilizing the Segoe UI font household, whereas the subtitle may use 14px, weight 400, additionally in Segoe UI. This typographic method enhances the chart’s readability and helps convey the visualized information successfully.

app.element.ts

// Title model.
 public titleStyle: Object = {
    fontFamily: 'Segoe UI',
    fontWeight: '600',
    measurement: '16px'
  };
// Subtitle model.
 public subTitleStyle: Object = {
    fontFamily: 'Segoe UI',
    fontWeight: '400',
    measurement: '14px'
  };

Axis labels and axis title

Axis labels are important textual content components positioned alongside a chart’s horizontal or vertical axis, clearly indicating what every axis measures. They supply very important context by indicating whether or not the axis represents classes, durations, or numerical values, which helps viewers interpret and perceive the introduced information precisely.

An axis title is a descriptive textual content positioned alongside a chart’s horizontal or vertical axis that clearly explains what the axis represents. It helps viewers perceive the measured information kind by specifying whether or not the axis reveals classes, time intervals, or numerical values.

On this instance, the Y-axis title represents “Applied sciences,”. The axis titles must be extra distinguished than the axis labels to make sure that they stand out. Subsequently, the axis titles have a font measurement of 13px, a font weight of 500, and use the Segoe UI font household. In distinction, the axis labels, which point out intervals or particular values, are barely lighter, with a font measurement of 12px and a font-weight of 400, and use the Segoe UI font household. This distinction helps improve the visibility and readability of the chart’s key data.

app.element.ts

public primaryXAxis: Object = {
    titleStyle: {
        fontFamily: 'Segoe UI',
        fontWeight: '500',
        measurement: '13px'   },
    labelStyle: {
        fontFamily: 'Segoe UI',
        fontWeight: '400',
        measurement: '12px'   }  };

Legend and legend textual content

A legend is a necessary a part of a chart that explains what every colour, sample, or image represents. It helps viewers shortly determine and perceive the totally different information sequence or classes proven within the chart.

On this instance, the legend textual content particulars the particular classes of applied sciences. The legend textual content can also be set to a font measurement of 14px however with a font-weight of 400, utilizing the identical Segoe UI font household.

app.element.ts

public legend: Object = {
   seen: true,
   place: 'Proper',
   textStyle: { fontFamily: 'Segoe UI', measurement: '14px', fontWeight: '400' }
 };

Knowledge labels

Knowledge labels are textual components positioned immediately on or close to information factors in a chart. They show particular values or data associated to every information level, making it simpler for viewers to interpret the precise figures or particulars within the chart.

Knowledge labels are designed to supply details about particular factors in a sequence. The information label textual content must be barely smaller to make sure readability and stop overlapping with different chart components.

On this instance, the info labels use a font measurement of 12px, a font-weight of 400, and the Segoe UI font household for higher readability and minimal interference with the chart.

app.element.ts

export class AppComponent {
 public marker = {
      dataLabel: {seen: true, place: 'Outer', font: { measurement: '12px', weight: '400', fontFamily: 'Segoe UI' }}
  }
}

Please confer with the next picture to visually observe the font customizations defined above, the place daring fonts are used for titles and lighter fonts for labels and legends.

Reference

For extra particulars, confer with the demos for font utilization within the Angular Charts on Stackblitz.

Harness the ability of Syncfusion’s feature-rich and highly effective Angular UI elements.

Attempt it Now Free

Conclusion

Thanks for studying! This weblog submit reveals methods to successfully use fonts within the Syncfusion Angular Charts for higher information visualization. We encourage you to check out this font hierarchy and go away suggestions within the feedback under.

For questions, you possibly can contact us by our help boards, help portal, or suggestions portal. We’re at all times pleased to help you!