Angular Charts - Tutorial Videos

Learn how easily you can create and configure Angular Charts of Syncfusion using the "ej2-angular-charts" package. You will be able to create an application with the help of Angular CLI and the "ng new" command. Also, you can customize the Angular Chart UI easily with its built-in features like legends, tooltips, and data labels.

Get an overview of the various types of Angular charts available from Syncfusion, with which you can visualize and read any kind of raw data easily. Apart from visually displaying and comparing the data on Angular charts, you can also customize it with the help of built-in features like tooltip, legend, and crosshair.

Learn how easily you can add and customize Syncfusion's Angular pie charts and doughnut charts, pyramid charts, and funnel charts in an Angular application. These circular and triangular chart types are collectively called accumulation chart types. With these chart types, you can visualize the proportionality of each item in a data set. Apart from visually displaying cumulative data in the Angular Charts component, you can also customize the component with the help of built-in features like tooltips, data labels, and legends.

Learn how easily you can add and customize Syncfusion's financial charts in an Angular application. With the help of candle charts, OpenHighLowClose charts, and HighLow charts, you can analyze the past and predict the future market trends of stocks based on the historic price, volume, or open interest. Apart from visually displaying financial data in the Angular Charts component, you can also customize the component with the help of its built-in features like tooltips, crosshairs, and legend settings.

Learn how to add and customize the Syncfusion Angular polar and radar charts in an Angular application. With the help of these charts, you can visually compare quantitative and qualitative factors that are represented on an axis starting from the same point. You can customize these chart types with the help of built-in features like tooltips, chart plotting types, and chart radii to enable stunning visual effects.

Learn how easily you can add a category axis to Syncfusion Angular charts and customize it with various built-in options. You will also see the category axis properties one by one with simple scenarios like: how to display data items based on the custom x-axis range values and custom interval; how to place labels between ticks or exactly on ticks; and how to display data items based on the indexed or actual x-axis values.

Learn how easily you can add a logarithmic axis to Syncfusion Angular charts and customize it with various built-in options. You will see the logarithmic axis properties one by one with simple scenarios like how to display lower- and higher-order magnitude values based on the custom y-axis range values and custom interval, and how to display the y-axis values with different log-base values.

Learn how easily you can add a date-time axis to Syncfusion Angular charts and customize it with various built-in options. You will see the date-time axis properties one by one with simple scenarios like how to display date-time values based on the custom x-axis range values and custom intervals, and how to format the date-time value labels with custom formal or globalized formats. You'll also learn how to display date-time values with nonlinear interval values in the horizontal axis using the date-time category axis.

Learn how easily you can add a numeric axis to Syncfusion Angular charts and customize it with various built-in options. You will see the numeric axis properties one by one with simple scenarios like: how to display data items based on the custom x-axis range values and custom intervals; how to format the numeric value labels with custom formal or globalized formats; and how to separate the data values into groups of thousands. You will also learn how to add range padding to the horizontal axis.

See how easily you can handle the zoom and pan behavior of Angular charts while working with large numbers of data points. You will learn how to zoom a specific chart area using different zooming modes. You will see the built-in zooming and panning customization options, like how to customize the zooming options available in the toolbar, and how to scroll the zoomed area in the view port to see other data points more clearly. You'll also learn how to adjust the axis intervals in a zoomed area.

Learn how easily you can add a tooltip option to Angular charts to make them more interactive. You will see how to format tooltip content with both HTML and custom template values. You'll also learn how to enhance the appearance of tooltips by using fill, border, and text style options.

Learn how easily you can add crosshair and trackball features to Angular charts, making them more interactive. You will learn how to display information about the axis values based on the pointer hover position using vertical and horizontal crosshair lines. You'll also learn how to track the data points closest to the pointer hover position in the chart area using the trackball marker and display its information in a tooltip.

See how easily you can add annotations to Angular charts to enhance their appearance. You will learn how to add image annotations to Angular charts. You will also see how to position images using the coordinateUnits property with pixel or point values, and you how to align images horizontally and vertically using alignment properties.

See how easily you can customize Angular chart axis labels to enhance the appearance of a chart. You will learn how to customize the chart axis labels with properties like smart axis labels, multilevel labels, and edge label placement. You see how to trim the axis label width and break the axis labels into multiple lines. You will also learn how to highlight a specific label on the x-axis, as well as how to position the axis labels.

Learn how easily you can customize an Angular chart axis to make it more informative. You will learn how to customize a chart axis with properties like axis crossing, titles, tick lines, and grid lines. You will learn how to add multiple axes to a chart, place an axis opposite from its original position, and inverse the chart axis to display the highest value of the axis near the origin.

Learn how easily you can add a legend to Angular charts to show information about chart series. You will look at the legend customization options for the legend position, alignment, shape, size, and so on. You'll also learn how to animate the chart when clicking on the legend items.