background

Kendo UI for Angular

Angular Line Chart

  • Illustrate patterns of change over time with the Kendo UI for Angular Line Chart.
  • Part of the Kendo UI for Angular library along with 110+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
Line Chart Header
  • Create Powerful Data Visualizations with the Angular Line Chart

    The Kendo UI for Angular Line Chart displays data as a series of individual values connected by a straight line. The Y axis represents the quantitative dimension, the X axis represents the category axis and the markers represent each data point. A foundational tool for visualizing data progression over time, the Angular Line Chart is perfect for illustrating trends and tracking key metrics. Enjoy the ability to plot multiple lines and observe several series segments change.  

    See the Angular Line Chart demo  

    Line Chart overview
  • Data Binding

    The Angular Line Chart supports various data sources containing numbers, arrays and objects (or models). You have the flexibility to bind the component to the series and categorical data like the axes and labels separately or together. 

    See the Angular Line Chart data binding demo 

  • Customization Options

    You can customize all elements of the Angular Line Chart, including the markers' shape and color, the line style, opacity and dash type and more. You can even change the positions of the two axes and create a vertical line chart when this chart type better supports your story visually. 

    Line Chart Dash Type of Line
  • Line Style

    Set the line appearance for each Angular Line Chart series to one of the three available styles: normal (default, straight line), step (horizontal and vertical lines) and smooth (fitted curve). You can further customize the dash style of the line, choosing from several combinations of dashes and dots. 

    See the Angular Line Chart line style demo 

    line chart line style
  • Angular Line Chart Rendering

    The Angular Line Chart renders data in the Canvas (bitmap) and SVG (vector graphics) formats. SVG is the default format to ensure an always crips presentation of your data. When performance is the priority, you can easily switch to a canvas format through a single configuration option to ensure your chart will handle large data and real-time updates with no interruption. 

    See the Angular Line Chart rendering demo 

  • Export Options

    You can export your Angular Line Chart to PDF, SVG, PNG and the Kendo UI drawing format. In scenarios where you need to change the image size or fit the chart to a paper size when exporting to PDF, the intuitive export method of the component will allow you to preserve the quality and rendering of the Chart in the output file. 

    See the Angular Line Chart export demo    

  • Panning and Zooming

    Leverage built-in pan and zoom functionality to enable users to zero in on specific ranges of the Kendo UI for Angular Line Chart. The component makes use of a drag motion for panning and a mouse wheel or pinch-and-zoom motions for zooming. Additionally, you can disable panning and zooming for an axis to prevent users from moving vertically or horizontally across the chart plot area. 

    See the Angular Line Chart pan and zoom demo 

  • Themes

    Customize the series colors of the Kendo UI for Angular Line Chart component with one of our predefined color sets, including Default (our own styling), Material (based on the Material Design guidelines), Bootstrap (resembles the Bootstrap styling) and Fluent (based on Microsoft Fluent UI). You can further customize any of the built-in themes or create a new theme to match your branding using Progress ThemeBuilder

    See the Angular Line Chart appearance demo    

  • Globalization

    The Kendo UI for Angular Line Chart supports globalization and localization to ensure that the component can effectively support any application’s language and locale. You can also enable the right-to-left (RTL) rendering for languages that use right-to-left scripts, such as Arabic and Hebrew. 

    See the Angular Line Chart globalization demo 

    Globalization

All Kendo UI for Angular Components

Next Steps

Get Started with Kendo UI for Angular

Kendo UI for Angular - Kendoka