Web Components Chart Features

    The Ignite UI for Web Components Charts allow you to display many different features to portray the full data story to be told with your chart. Each of these features are fully customizable, and can be styled to suit your design needs - allowing you full control. Interactions such as highlighting and annotations allow you to call out important data details allowing for a deeper data analysis within your chart.

    The Web Components Charts offer the following chart features:

    Axis

    Modify or customize all aspects of both the X-Axis and Y-Axis using the different axis properties. You can display gridlines, customize the style of tickmarks, change axis titles, and even modify axis locations and crossing values. You can learn more about customizations of the Web Components chart's Axis Gridlines, Axis Layouts, and Axis Options topic.

    EXAMPLE
    TS
    HTML
    CSS

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Annotations

    These additional layers are on top of the chart which are mouse / touch dependent. Used individually or combined, they provide powerful interactions that help to highlight certain values within the chart. You can learn more about this feature in the Chart Annotations topic.

    EXAMPLE
    TS
    HTML
    CSS

    Ignite UI for Web Components | CTA Banner

    Animations

    Animate your chart as it loads a new data source by enabling animations. These are customizable by setting different types of animations and the speed at which those animations take place. You can learn more about this feature in the Chart Animations topic.

    EXAMPLE
    TS
    HTML
    CSS

    Highlighting

    Bring focus to visuals such as lines, columns, or markers by highlighting them as the mouse hovers over the data items. This features is enabled on all chart types. You can learn more about this feature in the Chart Highlighting topic.

    EXAMPLE
    TS
    HTML
    CSS

    Markers

    Identify data points quickly, even if the value falls between major gridlines with the use of markers on the chart series. These are fully customizable in style, color, and shape. You can learn more about this feature in the Chart Markers topic.

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    You can navigate the chart by zooming and panning with the mouse, keyboard, and touch interactions. You can learn more about this feature in the Chart Navigation topic.

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    Overlays

    Overlays allows you to annotate important values and thresholds by plotting horizontal or vertical lines in charts. You can learn more about this feature in the Chart Overlays topic.

    EXAMPLE
    TS
    HTML
    CSS

    Performance

    Web Components charts are optimized for high performance of rendering millions of data points and updating them every few milliseconds. However, there are several chart features that affect performance of the charts and they should be considered when optimizing performance in your application. You can learn more about this feature in the Chart Performance topic.

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    Tooltips

    Display all information relevant to the particular series type via Tooltips. There are different tooltips that can be enabled, such as Item-level and Category-level tooltips. You can learn more about this feature in the Chart Tooltips topic.

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    Trendlines

    Use trendlines to identify a trend or find patterns in your data. There are many different trendlines supported by the Web Components chart, such as CubicFit and LinearFit. You can learn more about this feature in the Chart Trendlines topic.

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    API References