Web Components Point Chart

    The Ignite UI for Web Components Point Chart renders a collection of points. Values are represented on the y-axis (labels on the left side) and categories are displayed on the x-axis (bottom labels). These charts emphasize the amount of change over a period of time or compare multiple items as well as the relationship of parts of a whole by displaying the total of the plotted values.

    Web Components Point Chart Example

    You can create the Web Components Point Chart in the IgcCategoryChartComponent control by binding your data to ItemsSource property and setting chartType property to Point enum, as shown in the example below.

    Web Components Point Chart with Single Series

    In the following example, the Web Components Point Chart plots a single data source by automatically selecting numeric data column for y-axis and non-numeric data column for x-axis.

    Web Components Point Chart with Multiple Series

    Since the Web Components Point Chart allows you to combine multiple series and compare or see how they change over time, let’s see how easy it is to achieve this. All we need to do is bind to a data source containing the data for China and the USA, and the point chart will automatically update to fit the additional data.

    Web Components Point Chart Styling

    Once the Web Components Point Chart is set up, we may want to make some further styling customizations such as change the markers and its outlines, brushes and thickness.

    Advanced Types of Point Charts

    You can create more advanced types of Web Components Point Charts using the IgcDataChartComponent control instead of IgcCategoryChartComponent control by following these topics:

    • Scatter Bubble Chart
    • [Scatter Marker Chart](<scatter-chart.md#web components-scatter-marker-chart>)
    • [Scatter HD Chart](<scatter-chart.md#web components-scatter-high-density-chart>)
    • [Polar Marker Chart](<polar-chart.md#web components-polar-marker-chart>)

    Additional Resources

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

    API References

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