Web Components Scatter Charts

    The Ignite UI for Web Components Scatter Chart belongs to a group of charts that show the relationship among items in distinct series of data or to plot data items using numeric x and y coordinates. These charts draw attention to uneven intervals or clusters of data. They are often used to plot scientific data, and can highlight the deviation of collected data from predicted results. Also, you can use them to organize data chronologically (even if the data is not in chronological order).

    Web Components Scatter Marker Chart

    Web Components Scatter Marker Chart renders as a collection of markers, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the IgcDataChartComponent control by binding your data to a IgcScatterSeriesComponent, as shown in the example below:

    EXAMPLE
    CountryDemographicAfrican.ts
    CountryDemographicEurope.ts
    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.

    Web Components Scatter Line Chart

    Web Components Scatter Line Chart renders as a collection of markers connected by a straight lines, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the IgcDataChartComponent control by binding your data to a IgcScatterLineSeriesComponent, as shown in the example below:

    EXAMPLE
    HealthDataForFrance.ts
    HealthDataForGermany.ts
    TS
    HTML
    CSS

    Ignite UI for Web Components | CTA Banner

    Web Components Scatter Spline Chart

    Web Components Scatter Spline Chart renders as a collection of markers connected by a curved spline, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the IgcDataChartComponent control by binding your data to a IgcScatterSplineSeriesComponent, as shown in the example below:

    EXAMPLE
    HealthDataForFrance.ts
    HealthDataForGermany.ts
    TS
    HTML
    CSS

    Web Components Scatter High Density Chart

    Use the Web Components Scatter High Density (HD) Chart to bind and show scatter data ranging from thousands to millions of data points with very little loading time. Due to this chart type being designed for such a large amount of points, it is visualized as tiny dots as opposed to full sized markers, and displays areas with the most data using a higher color density representing a cluster of data points. You can create this type of chart in the IgcDataChartComponent control by binding your data to a IgcHighDensityScatterSeriesComponent, as shown in the example below:

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    Web Components Scatter Area Chart

    Web Components Scatter Area Chart draws a colored surface based on a triangulation of X and Y data with a numeric data value assigned to each point. This chart is useful for rendering heat maps, magnetic field strength or Wi-Fi strength in an office. You can create this type of chart in the IgcDataChartComponent control by binding your data to a IgcScatterAreaSeriesComponent, as shown in the example below:

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    Web Components Scatter Contour Chart

    Web Components Scatter Contour Chart draws colored contour lines based on a triangulation of X and Y data with a numeric data value assigned to each point. This chart is useful for rendering heat maps, magnetic field strength or Wi-Fi strength in an office. You can create this type of chart in the IgcDataChartComponent control by binding your data to a IgcScatterContourSeriesComponent, as shown in the example below:

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    Additional Resources

    You can find more information about related chart types in these topics:

    API References

    The following table lists API members mentioned in the above sections: