diff --git a/_contentTemplates/chart/link-to-basics.md b/_contentTemplates/chart/link-to-basics.md index 13e5fdf31d..05adea04be 100644 --- a/_contentTemplates/chart/link-to-basics.md +++ b/_contentTemplates/chart/link-to-basics.md @@ -53,10 +53,6 @@ Colors per series item } ```` ->caption The result from the code snippet above - -![](images/color-field-bar-column-chart.png) - #end #gap-and-spacing @@ -120,9 +116,6 @@ You can render the lines between the points with different styles. The supported * `Smooth`—This style causes the Chart to display a fitted curve through data points. It is suitable when the data requires to be displayed with a curve, or when you wish to connect the points with smooth instead of straight lines. Not supported with [stacked]({%slug components/chart/stack%}) series with missing values. ->caption Comparison between the line styles - -![](images/line-chart-step-and-smooth.png) #end #opacity-area-bubble diff --git a/components/chart/data-bind.md b/components/chart/data-bind.md index 43b504ad40..37ab16fad0 100644 --- a/components/chart/data-bind.md +++ b/components/chart/data-bind.md @@ -79,10 +79,6 @@ Independent data } ```` ->caption The result from the code snippet above - -![](images/independent-series-binding.png) - ## Attach Series Items to Their Categories You can provide a `List` to the `Data` property of a series that contains both its data points, and its x-axis categories. Then, set the series: @@ -128,10 +124,6 @@ One model for all the chart data } ```` ->caption The result from the code snippet above - -![](images/bind-chart-to-single-collection.png) - >caption Unique categories are added independently. ````CSHTML @@ -167,10 +159,6 @@ Separate fields for series categories } ```` ->caption The result from the code snippet above - -![](images/unique-categories.png) - >tip You can define [multiple x-axes](multiple-axes) to avoid this behavior and have each series populate its own x-axis. >caption If category values match, they will be combined @@ -211,10 +199,6 @@ Combining matching standalone categories } ```` ->caption The result from the code snippet above - -![](images/matching-categories.png) - ## Mixed Data Source You can choose where to take the categories and series data from, and combine both approaches to a solution that fits the existing data models and data retrieval logic that you have. @@ -263,10 +247,6 @@ Mixed data binding } ```` ->caption The result from the code snippet above - -![](images/mixed-data-sources-1.png) - >caption Populate categories from model, and some series from standalone data. Standalone categories are ignored. ````CSHTML @@ -309,11 +289,6 @@ Standalone categories are ignored when there is category data binding to a model } ```` ->caption The result from the code snippet above - -![](images/standalone-categories-ignored-if-bound-from-series.png) - - ## Numerical Charts Numerical charts do not use categories and you do not need to consider how the x-axis is shared between the series and whether several data points will be in the same zone. You can provide a model for each series that contains the necessary information (x-value, y-value, and any other value that may be needed, such as size for bubble charts) and they will be plotted independently. diff --git a/components/chart/date-axis.md b/components/chart/date-axis.md index 8983fce67c..2799cf6351 100644 --- a/components/chart/date-axis.md +++ b/components/chart/date-axis.md @@ -71,10 +71,6 @@ Grouping by month, aggregates } ```` ->caption The result from the code snippet above - -![](images/date-axis.png) - ### Advanced Features #### Automatic Fitting @@ -168,9 +164,7 @@ If the data provided to the chart uses the complete `DateTime` format, this will For example, if the chosen `BaseUnit` is `days`, the X labels mark the beginning of the day and the data records also specify time values, their markers will be rendered at the corresponding to their time value point and not exactly on the label for this day. This specific behavior when working with `DateTime` values could be observed in the following examples: ->caption ScatterLine chart with day and time values. Markers are rendered after the day labels to also respect the time values. The result from the snippet below - -![ScatterLine chart with day and time values](images/scatter-line-day-and-time.png) +>caption ScatterLine chart with day and time values. Markers are rendered after the day labels to also respect the time values. ````CSHTML @* ScatterLine chart with day and time values for the X-axis *@ @@ -225,9 +219,7 @@ For example, if the chosen `BaseUnit` is `days`, the X labels mark the beginning ````
->caption ScatterLine chart with only days values. Markers are rendered exactly on the day labels. The result from the snippet below - -![ScatterLine chart with only day values](images/scatter-line-days-only.png) +>caption ScatterLine chart with only days values. Markers are rendered exactly on the day labels. ````CSHTML @* ScatterLine chart with only day values for the X-axis *@ diff --git a/components/chart/events.md b/components/chart/events.md index ce44d03c7f..1c7005bbaf 100644 --- a/components/chart/events.md +++ b/components/chart/events.md @@ -107,10 +107,6 @@ These examples showcase the different applications of the `OnSeriesClick` event. } ```` ->caption The result from the code snippet above - -![onseriesclick basic example](images/onseries-click-basic-example.gif) - ### Get The Data Model For The Clicked Series @@ -177,9 +173,6 @@ These examples showcase the different applications of the `OnSeriesClick` event. } ```` ->caption The result from the code snippet above - -![onseriesclick get data model example](images/onseries-click-get-model-example.gif) ### Load Data On Demand Based On Series Click diff --git a/components/chart/images/basic-templates-result.png b/components/chart/images/basic-templates-result.png deleted file mode 100644 index ca2a1a04fb..0000000000 Binary files a/components/chart/images/basic-templates-result.png and /dev/null differ diff --git a/components/chart/images/bind-chart-to-single-collection.png b/components/chart/images/bind-chart-to-single-collection.png deleted file mode 100644 index b146105005..0000000000 Binary files a/components/chart/images/bind-chart-to-single-collection.png and /dev/null differ diff --git a/components/chart/images/canvas-chart-example.PNG b/components/chart/images/canvas-chart-example.PNG deleted file mode 100644 index d87523b8f5..0000000000 Binary files a/components/chart/images/canvas-chart-example.PNG and /dev/null differ diff --git a/components/chart/images/chart-crossing-value-axis-to-the-right.png b/components/chart/images/chart-crossing-value-axis-to-the-right.png deleted file mode 100644 index 850c668c8e..0000000000 Binary files a/components/chart/images/chart-crossing-value-axis-to-the-right.png and /dev/null differ diff --git a/components/chart/images/column-chart-multiple-axes-behavior.png b/components/chart/images/column-chart-multiple-axes-behavior.png deleted file mode 100644 index 7e9341e6bc..0000000000 Binary files a/components/chart/images/column-chart-multiple-axes-behavior.png and /dev/null differ diff --git a/components/chart/images/date-axis.png b/components/chart/images/date-axis.png deleted file mode 100644 index bf7da87f31..0000000000 Binary files a/components/chart/images/date-axis.png and /dev/null differ diff --git a/components/chart/images/hide-label-conditionally.png b/components/chart/images/hide-label-conditionally.png deleted file mode 100644 index 5f280a6190..0000000000 Binary files a/components/chart/images/hide-label-conditionally.png and /dev/null differ diff --git a/components/chart/images/independent-series-binding.png b/components/chart/images/independent-series-binding.png deleted file mode 100644 index 674df2103b..0000000000 Binary files a/components/chart/images/independent-series-binding.png and /dev/null differ diff --git a/components/chart/images/label-format-strings-basics.png b/components/chart/images/label-format-strings-basics.png deleted file mode 100644 index a419d3ed0c..0000000000 Binary files a/components/chart/images/label-format-strings-basics.png and /dev/null differ diff --git a/components/chart/images/matching-categories.png b/components/chart/images/matching-categories.png deleted file mode 100644 index c37edf0faa..0000000000 Binary files a/components/chart/images/matching-categories.png and /dev/null differ diff --git a/components/chart/images/mixed-data-sources-1.png b/components/chart/images/mixed-data-sources-1.png deleted file mode 100644 index 2b899a23bd..0000000000 Binary files a/components/chart/images/mixed-data-sources-1.png and /dev/null differ diff --git a/components/chart/images/multiple-axes-numerical-series.png b/components/chart/images/multiple-axes-numerical-series.png deleted file mode 100644 index b1277bfc8a..0000000000 Binary files a/components/chart/images/multiple-axes-numerical-series.png and /dev/null differ diff --git a/components/chart/images/multiple-category-axes-line-chart.png b/components/chart/images/multiple-category-axes-line-chart.png deleted file mode 100644 index 29932c6157..0000000000 Binary files a/components/chart/images/multiple-category-axes-line-chart.png and /dev/null differ diff --git a/components/chart/images/multiple-category-axes=-column-chart.png b/components/chart/images/multiple-category-axes=-column-chart.png deleted file mode 100644 index c480a54021..0000000000 Binary files a/components/chart/images/multiple-category-axes=-column-chart.png and /dev/null differ diff --git a/components/chart/images/multiple-y-axes.png b/components/chart/images/multiple-y-axes.png deleted file mode 100644 index db56676c5f..0000000000 Binary files a/components/chart/images/multiple-y-axes.png and /dev/null differ diff --git a/components/chart/images/named-stacks.png b/components/chart/images/named-stacks.png deleted file mode 100644 index 3b4a8af828..0000000000 Binary files a/components/chart/images/named-stacks.png and /dev/null differ diff --git a/components/chart/images/onseries-click-basic-example.gif b/components/chart/images/onseries-click-basic-example.gif deleted file mode 100644 index dacf3e47df..0000000000 Binary files a/components/chart/images/onseries-click-basic-example.gif and /dev/null differ diff --git a/components/chart/images/onseries-click-get-model-example.gif b/components/chart/images/onseries-click-get-model-example.gif deleted file mode 100644 index 28a8c61768..0000000000 Binary files a/components/chart/images/onseries-click-get-model-example.gif and /dev/null differ diff --git a/components/chart/images/overview-chart.png b/components/chart/images/overview-chart.png deleted file mode 100644 index b81c8ee04d..0000000000 Binary files a/components/chart/images/overview-chart.png and /dev/null differ diff --git a/components/chart/images/scatter-line-day-and-time.PNG b/components/chart/images/scatter-line-day-and-time.PNG deleted file mode 100644 index 38a657f4f2..0000000000 Binary files a/components/chart/images/scatter-line-day-and-time.PNG and /dev/null differ diff --git a/components/chart/images/scatter-line-days-only.PNG b/components/chart/images/scatter-line-days-only.PNG deleted file mode 100644 index a706a7f7fc..0000000000 Binary files a/components/chart/images/scatter-line-days-only.PNG and /dev/null differ diff --git a/components/chart/images/stack-100-groups.png b/components/chart/images/stack-100-groups.png deleted file mode 100644 index ac480f20b5..0000000000 Binary files a/components/chart/images/stack-100-groups.png and /dev/null differ diff --git a/components/chart/images/stacked-series.png b/components/chart/images/stacked-series.png deleted file mode 100644 index 486f0bd2db..0000000000 Binary files a/components/chart/images/stacked-series.png and /dev/null differ diff --git a/components/chart/images/standalone-categories-ignored-if-bound-from-series.png b/components/chart/images/standalone-categories-ignored-if-bound-from-series.png deleted file mode 100644 index ec8e0a01dc..0000000000 Binary files a/components/chart/images/standalone-categories-ignored-if-bound-from-series.png and /dev/null differ diff --git a/components/chart/images/svg-chart-example.PNG b/components/chart/images/svg-chart-example.PNG deleted file mode 100644 index a4ce5bb635..0000000000 Binary files a/components/chart/images/svg-chart-example.PNG and /dev/null differ diff --git a/components/chart/images/unique-categories.png b/components/chart/images/unique-categories.png deleted file mode 100644 index 7b5f2b8410..0000000000 Binary files a/components/chart/images/unique-categories.png and /dev/null differ diff --git a/components/chart/images/x-axis-labels-at-bottom.png b/components/chart/images/x-axis-labels-at-bottom.png deleted file mode 100644 index fcd156c9c5..0000000000 Binary files a/components/chart/images/x-axis-labels-at-bottom.png and /dev/null differ diff --git a/components/chart/labels-template-and-format.md b/components/chart/labels-template-and-format.md index b7f9bac137..855743a37b 100644 --- a/components/chart/labels-template-and-format.md +++ b/components/chart/labels-template-and-format.md @@ -76,10 +76,6 @@ Standard number format strings } ```` ->caption The result from the code snippet above - -![](images/label-format-strings-basics.png) - ## Templates To set a template for the corresponding label, use the `Template` property in the corresponding Label inner tag of the element you want to customize, for example, under `ChartSeriesLabels` or under `ChartValueAxisLabels`. @@ -161,10 +157,6 @@ Label templates } ```` ->caption The result from the code snippet above - -![](images/basic-templates-result.png) - In a **series label template**, you can use the following fields: @@ -262,11 +254,6 @@ Conditional label display } ```` ->caption The result from the code above: - -![](images/hide-label-conditionally.png) - - ## See Also - * [Live Demos: Chart](https://demos.telerik.com/blazor-ui/chart/index) + * [Live Demos: Chart](https://demos.telerik.com/blazor-ui/chart/index) \ No newline at end of file diff --git a/components/chart/multiple-axes.md b/components/chart/multiple-axes.md index f812b94cd5..5e564731b8 100644 --- a/components/chart/multiple-axes.md +++ b/components/chart/multiple-axes.md @@ -12,10 +12,6 @@ position: 21 You can have the chart render more than one axis for a given dimension. This lets you associate series with different axes, and position different axes to the left, right, top or bottom of the chart. This is often useful when you have data for some series that varies greatly in magnitude from other data, or is measured in a different unit. You can also associate series with different categories on the x-axis without having them side-by-side. ->caption Multiple Y-axes in a chart - -![](images/multiple-y-axes.png) - >tip The [Examples](#examples) section offer several common use-cases. This article contains the following sections: @@ -122,10 +118,6 @@ Multiple y-axes and their position } ```` ->caption The result from the code snippet above - -![](images/multiple-y-axes.png) - ### Category Axes You can use multiple category axes to associate each series with its own points on the axis instead of having them add up on the same axis. @@ -176,10 +168,6 @@ Multiple category axes and their position } ```` ->caption The result from the code snippet above - -![](images/multiple-category-axes-line-chart.png) - ### Behavior with Bar and Column Charts @@ -234,10 +222,6 @@ Viable values for the axes positions } ```` ->caption The result from the code snippet above - -![](images/multiple-category-axes=-column-chart.png) - >caption Examples of potentially unwanted behaviors of column and bar types of charts with multiple axes, and the code that produces those issues. ````LargeCrossingPoint @@ -321,10 +305,6 @@ Potentially unwanted behavior 2 } ```` ->caption The result from the code snippets above - -![](images/column-chart-multiple-axes-behavior.png) - ### Numerical Chart Examples @@ -442,10 +422,6 @@ When using numerical charts, you define the extra axes in the `ChartXAxes` and ` } ```` ->caption The result from the code snippet above - -![](images/multiple-axes-numerical-series.png) - ### Move X-Axis Labels to the Bottom @@ -501,10 +477,6 @@ The general approach is to set an axis crossing point that has a very large valu } ```` ->caption The result from the code snippet above - -![](images/x-axis-labels-at-bottom.png) - ### Move Value Axis to the Right @@ -574,10 +546,6 @@ This approach can work for both numerical and categorical axes. The example belo } ```` ->caption The result from the code snippet above - -![Move the second value axis to the right](images/chart-crossing-value-axis-to-the-right.png) - ## See Also diff --git a/components/chart/overview.md b/components/chart/overview.md index c9f36f13bc..a20c772a02 100644 --- a/components/chart/overview.md +++ b/components/chart/overview.md @@ -71,11 +71,6 @@ Basic chart and common settings/elements } ```` ->caption The result from the code snippet above - -![](images/overview-chart.png) - - ## Chart Elements @[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings) diff --git a/components/chart/rendering-modes.md b/components/chart/rendering-modes.md index e6dee9c0c4..01573c55aa 100644 --- a/components/chart/rendering-modes.md +++ b/components/chart/rendering-modes.md @@ -27,9 +27,7 @@ Using vector graphics ensures that: Since `SVG` is the default rendering mode of the Chart, you don't need to explicitly define it. ->caption Bar Chart rendered as SVG. The result from the snippet below. - -![](images/svg-chart-example.png) +>caption Bar Chart rendered as SVG. ````CSHTML @* SVG Bar Chart *@ @@ -73,9 +71,7 @@ On the downside, rendering to a fixed resolution bitmap results in: * Blurry images on zoom. * Poorer print quality. ->caption Bar Chart rendered as Canvas. The result from the snippet below. - -![](images/canvas-chart-example.png) +>caption Bar Chart rendered as Canvas. ````CSHTML @* Canvas Bar Chart *@ diff --git a/components/chart/stacked-series.md b/components/chart/stacked-series.md index 73cec8431d..b56f69dfe0 100644 --- a/components/chart/stacked-series.md +++ b/components/chart/stacked-series.md @@ -62,10 +62,6 @@ Basic stacking of series } ```` ->caption The result from the code snippet above - -![](images/stacked-series.png) - ## Named Stack You can choose which series to cluster together through the `Group` property of the `ChartSeriesStack` tag. If you set it to one series, it automatically enables stacking, so if you want to put one or more series in a separate group, you must provide a group name for each series. @@ -106,10 +102,6 @@ Stack clustering in groups } ```` ->caption The result from the code snippet above - -![](images/named-stacks.png) - ## Stack 100% You can also have each stack fill up the entire chart - its total value will be 100%. This is often useful when contribution of values within stacks is more meaningful than the amounts themselves. @@ -154,10 +146,6 @@ Stack to 100% } ```` ->caption The result from the code snippet above - -![](images/stack-100-groups.png) - ## See Also * [Live Demos: Chart](https://demos.telerik.com/blazor-ui/chart/index) diff --git a/components/chart/tooltip/overview.md b/components/chart/tooltip/overview.md index 418985a912..8fbae7c9b5 100644 --- a/components/chart/tooltip/overview.md +++ b/components/chart/tooltip/overview.md @@ -59,10 +59,6 @@ To enable tooltips for the data points of each individual series: } ```` ->caption The result from the code snippet above - -![single series tooltip](images/tooltip-basic-config.png) - ## Common Tooltip @@ -109,10 +105,6 @@ To enable the same tooltip for all series: } ```` ->caption The result from the code snippet above - -![common tooltip settings for all series](images/tooltip-common-example.gif) - ## Customization @@ -186,10 +178,6 @@ You can customize the appearance of the individual series tooltip by using: ```` ->caption The result from the code snippet above - -![tooltip parameter customization example](images/tooltip-customized-example.png) - #### Common Tooltip Settings @@ -271,10 +259,6 @@ The available series data point information in the `context` is: } ```` ->caption The result from the code snippet above - -![tooltip template example](images/tooltip-template-example.png) - ## See Also diff --git a/components/chart/tooltip/shared.md b/components/chart/tooltip/shared.md index da3e7dfa6d..aea2c94bcb 100644 --- a/components/chart/tooltip/shared.md +++ b/components/chart/tooltip/shared.md @@ -59,9 +59,6 @@ To enable the shared tooltip: public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; } ```` ->caption The result from the code snippet above - -![shared tooltip example](images/shared-tooltip-basic.png) ## Customization @@ -145,9 +142,6 @@ Each `Point` contains the following data: public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; } ```` ->caption The result from the code snippet above - -![shared tooltip template example](images/shared-tooltip-template.png) ## See also diff --git a/components/chart/types/area.md b/components/chart/types/area.md index afaeb74c83..7cc939fc9b 100644 --- a/components/chart/types/area.md +++ b/components/chart/types/area.md @@ -15,10 +15,6 @@ The Blazo An Area chart emphasizes the volume of money, data or any other unit that the given series has encompassed. When backgrounds are semi-transparent, it lets the user clearly see where different sets of data overlap. ->caption Area chart. Results from the first code snippet below - -![](images/basic-area-chart.png) - @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) #### To create an area chart: diff --git a/components/chart/types/bar.md b/components/chart/types/bar.md index 9b0469ac29..4af3f8d49d 100644 --- a/components/chart/types/bar.md +++ b/components/chart/types/bar.md @@ -12,10 +12,6 @@ position: 0 The Blazor Bar chart displays data as horizontal bars whose lengths vary according to their value. You can use a Bar chart to show a comparison between several sets of data (for example, summaries of sales data for different time periods). Each series is automatically colored differently for easier reading. ->caption Bar chart. Results from the first code snippet below - -![](images/basic-bar-chart.png) - @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) #### To create a bar chart: diff --git a/components/chart/types/bubble.md b/components/chart/types/bubble.md index ba650de180..e73c4e141f 100644 --- a/components/chart/types/bubble.md +++ b/components/chart/types/bubble.md @@ -14,10 +14,6 @@ The Bla A Bubble chart is useful for visualizing different scientific relationships (e.g, economical, social, etc.). This chart type's x-axis is also numerical and does not require items. ->caption Bubble chart. Results from the first code snippet below - -![](images/basic-bubble-chart.png) - @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) #### To create a bubble chart: @@ -151,10 +147,6 @@ The size field should, generally, have positive values as it correlates to the p } ```` ->caption The result from the code snippet above - -![](images/bubble-chart-negative-values.png) - @[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings) diff --git a/components/chart/types/candlestick.md b/components/chart/types/candlestick.md index f46c6bac04..297cbec802 100644 --- a/components/chart/types/candlestick.md +++ b/components/chart/types/candlestick.md @@ -12,10 +12,6 @@ position: 0 The Candlestick chart shows data for the movement of the price of a financial unit. It consists of a bar (the candle), representing the open and close values, and vertical lines, the candlesticks, which illustrate the highest and lowest values. ->caption Candlestick chart. Results from the first code snippet below - -![](images/basic-candlestick-chart.png) - @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) #### To create a candlestick chart: diff --git a/components/chart/types/column.md b/components/chart/types/column.md index ae740df8f5..69fd999620 100644 --- a/components/chart/types/column.md +++ b/components/chart/types/column.md @@ -12,10 +12,6 @@ position: 0 The Blazor Column chart displays data as vertical bars whose heights vary according to their value. You can use a Column chart to show a comparison between several sets of data (for example, summaries of sales data for different time periods). Each series is automatically colored differently for easier reading. ->caption Column chart. Results from the first code snippet below - -![](images/basic-column-chart.png) - @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) @[template](/_contentTemplates/date-inputs/format-placeholders.md#format-placeholder) diff --git a/components/chart/types/donut.md b/components/chart/types/donut.md index f0939ecf29..ea906d0be4 100644 --- a/components/chart/types/donut.md +++ b/components/chart/types/donut.md @@ -12,10 +12,6 @@ position: 0 The Blazor Donut chart displays the data as sectors from a two-dimensional circle and is therefore useful for displaying data as parts of a whole. Unlike a pie chart, it can have multiple series in the same chart. There is a hole in the middle of the circle, hence the name of the chart. ->caption Donut chart. Results from the first code snippet below - -![](images/basic-donut-chart.png) - @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) #### To create a donut chart: @@ -147,10 +143,6 @@ You can control the color of the individual segments of the donut chart by provi } ```` ->caption The result from the code snippet above - -![](images/custom-color-in-segments-donut.png) - ### Exploded Segment You can have some of the segments of the donut chart separated from the rest of the circle with a small margin. This helps bring attention to them as outliers or as important bits that the viewer should focus on. @@ -210,10 +202,6 @@ To explode (separate) a segment, use the `ExplodeField` property of the series a } ```` ->caption The result from the code snippet above - -![](images/exploded-donut-chart.png) - ### Visible In Legend You can hide certain segments from the legend (for example, if their contribution is insignificantly small). To do this, add a boolean field to the model and set its name to the `VisibleInLegendField` property of the donut series. The flags in this field will denote whether the particular item will be rendered in the legend. @@ -276,10 +264,6 @@ You can hide certain segments from the legend (for example, if their contributio } ```` ->caption The result from the code snippet above - -![](images/donut-chart-hide-from-legend.png) - ### Hole Size You can change the percentage that the hole in the middle takes from the entire diameter of the circle by setting the `HoleSize` property of the series. Setting `0` removes the hole, and `100` means the entire chart is the hole. @@ -329,10 +313,6 @@ Control the hole size of the donut chart } ```` ->caption Comparison between the result of the code snippet above and the default behavior - -![](images/donut-hole-size.png) - ### Multiple Series Unlike a pie chart, a donut chart can have multiple series in a single chart. Each series is nested in the next - the first declared series is in the center, and the last series is at the outer edge. @@ -341,10 +321,6 @@ You can use multiple series to showcase relationships within a data set, or seve You can also use the `ColorField` property to define a field with the segments' colors. With this, you can color-code different series and their relationships to one another. ->caption Multiple donut series in a single chart (code sample after the figure) - -![](images/multiple-donut-series.png) - ````CSHTML @* You can bind the entire chart to one collection of data, even though this example shows separate collections for each series *@ diff --git a/components/chart/types/heatmap.md b/components/chart/types/heatmap.md index 7c4eaec408..c57d5b0f9d 100644 --- a/components/chart/types/heatmap.md +++ b/components/chart/types/heatmap.md @@ -23,10 +23,6 @@ The Blazor H * [ColorField](#colorfield) * [Customize Chart Elements - Nested Tags Settings](#customize-chart-elements--nested-tags-settings) ->caption Heatmap chart. Results from the first code snippet below - -![](images/basic-heatmap-chart.png) - @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) #### To create a Heatmap chart: @@ -204,9 +200,7 @@ To change the marker type you should set the `Type` parameter, exposed on the `C * `RoundedRect` - specifies a rectangle with rounded edges form of the marker. ->caption Change the Type of the marker. The result from the code snippet below. - -![roundedrect type](images/heatmap-type-parameter.png) +>caption Change the Type of the marker. ````CSHTML @* Set the type of the marker to RoundedRect *@ @@ -279,9 +273,7 @@ To change the marker type you should set the `Type` parameter, exposed on the `C The `Color` parameter controls the general color pallete for the markers of the Heatmap. The invidual marker color set to the markers depends the value bound to the `Field` - the higher the value the darker the color. ->caption Change the Color of the Heatmap. The result from the code snippet below. - -![color parameter](images/heatmap-color-parameter.png) +>caption Change the Color of the Heatmap. ````CSHTML @* Set the color of the Heatmap to blue. *@ @@ -352,9 +344,7 @@ The `Color` parameter controls the general color pallete for the markers of the The `ColorField` parameter allows you to control the color of an individual marker in the content of the Heatmap. If you do not provide a color in the field bound to the `ColorField` the Heatmap will render white markers. ->caption Provide a custom color to all markers in the Heatmap. The result from the code snippet below. - -![colorfield parameter](images/heatmap-colorfield-parameter.png) +>caption Provide a custom color to all markers in the Heatmap. ````CSHTML @* Use the ColorField to provide custom color to each individual marker *@ @@ -428,9 +418,7 @@ The `ColorField` parameter allows you to control the color of an individual mark @[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings-axis-free) ->caption Hide the Labels for both X and Y axes. The result of the code snippet below. - -![hidden labels](images/heatmap-hidden-labels.png) +>caption Hide the Labels for both X and Y axes. ````CSHTML @* Use the nested tag settings to hide the labels for both axes *@ diff --git a/components/chart/types/images/basic-area-chart.png b/components/chart/types/images/basic-area-chart.png deleted file mode 100644 index 240c6f42be..0000000000 Binary files a/components/chart/types/images/basic-area-chart.png and /dev/null differ diff --git a/components/chart/types/images/basic-bar-chart.png b/components/chart/types/images/basic-bar-chart.png deleted file mode 100644 index 0eb347bf9e..0000000000 Binary files a/components/chart/types/images/basic-bar-chart.png and /dev/null differ diff --git a/components/chart/types/images/basic-bubble-chart.png b/components/chart/types/images/basic-bubble-chart.png deleted file mode 100644 index 816e561a63..0000000000 Binary files a/components/chart/types/images/basic-bubble-chart.png and /dev/null differ diff --git a/components/chart/types/images/basic-candlestick-chart.png b/components/chart/types/images/basic-candlestick-chart.png deleted file mode 100644 index 9acdd144a2..0000000000 Binary files a/components/chart/types/images/basic-candlestick-chart.png and /dev/null differ diff --git a/components/chart/types/images/basic-column-chart.png b/components/chart/types/images/basic-column-chart.png deleted file mode 100644 index d1cfa8ff0e..0000000000 Binary files a/components/chart/types/images/basic-column-chart.png and /dev/null differ diff --git a/components/chart/types/images/basic-donut-chart.png b/components/chart/types/images/basic-donut-chart.png deleted file mode 100644 index 7f177d6383..0000000000 Binary files a/components/chart/types/images/basic-donut-chart.png and /dev/null differ diff --git a/components/chart/types/images/basic-heatmap-chart.png b/components/chart/types/images/basic-heatmap-chart.png deleted file mode 100644 index 1f02f1ff63..0000000000 Binary files a/components/chart/types/images/basic-heatmap-chart.png and /dev/null differ diff --git a/components/chart/types/images/basic-line-chart.png b/components/chart/types/images/basic-line-chart.png deleted file mode 100644 index d3b5c64a22..0000000000 Binary files a/components/chart/types/images/basic-line-chart.png and /dev/null differ diff --git a/components/chart/types/images/basic-pie-chart.png b/components/chart/types/images/basic-pie-chart.png deleted file mode 100644 index 9bce3400fd..0000000000 Binary files a/components/chart/types/images/basic-pie-chart.png and /dev/null differ diff --git a/components/chart/types/images/basic-radar-column-chart.png b/components/chart/types/images/basic-radar-column-chart.png deleted file mode 100644 index 3d28995cde..0000000000 Binary files a/components/chart/types/images/basic-radar-column-chart.png and /dev/null differ diff --git a/components/chart/types/images/basic-scatter-chart.png b/components/chart/types/images/basic-scatter-chart.png deleted file mode 100644 index 81dc0a7c6e..0000000000 Binary files a/components/chart/types/images/basic-scatter-chart.png and /dev/null differ diff --git a/components/chart/types/images/basic-scatterline-chart.png b/components/chart/types/images/basic-scatterline-chart.png deleted file mode 100644 index aa209490c4..0000000000 Binary files a/components/chart/types/images/basic-scatterline-chart.png and /dev/null differ diff --git a/components/chart/types/images/bubble-chart-negative-values.png b/components/chart/types/images/bubble-chart-negative-values.png deleted file mode 100644 index 136b4c0ada..0000000000 Binary files a/components/chart/types/images/bubble-chart-negative-values.png and /dev/null differ diff --git a/components/chart/types/images/color-field-bar-column-chart.png b/components/chart/types/images/color-field-bar-column-chart.png deleted file mode 100644 index 0d599212a5..0000000000 Binary files a/components/chart/types/images/color-field-bar-column-chart.png and /dev/null differ diff --git a/components/chart/types/images/custom-color-in-segments-donut.png b/components/chart/types/images/custom-color-in-segments-donut.png deleted file mode 100644 index a4fd991d6a..0000000000 Binary files a/components/chart/types/images/custom-color-in-segments-donut.png and /dev/null differ diff --git a/components/chart/types/images/custom-color-in-segments.png b/components/chart/types/images/custom-color-in-segments.png deleted file mode 100644 index 642d740c5c..0000000000 Binary files a/components/chart/types/images/custom-color-in-segments.png and /dev/null differ diff --git a/components/chart/types/images/donut-chart-hide-from-legend.png b/components/chart/types/images/donut-chart-hide-from-legend.png deleted file mode 100644 index f65821d0dc..0000000000 Binary files a/components/chart/types/images/donut-chart-hide-from-legend.png and /dev/null differ diff --git a/components/chart/types/images/donut-hole-size.png b/components/chart/types/images/donut-hole-size.png deleted file mode 100644 index 34f038f90d..0000000000 Binary files a/components/chart/types/images/donut-hole-size.png and /dev/null differ diff --git a/components/chart/types/images/exploded-donut-chart.png b/components/chart/types/images/exploded-donut-chart.png deleted file mode 100644 index 575338c69d..0000000000 Binary files a/components/chart/types/images/exploded-donut-chart.png and /dev/null differ diff --git a/components/chart/types/images/exploded-pie-chart.png b/components/chart/types/images/exploded-pie-chart.png deleted file mode 100644 index 3bf6dd825d..0000000000 Binary files a/components/chart/types/images/exploded-pie-chart.png and /dev/null differ diff --git a/components/chart/types/images/heatmap-color-parameter.png b/components/chart/types/images/heatmap-color-parameter.png deleted file mode 100644 index 133d0f88e7..0000000000 Binary files a/components/chart/types/images/heatmap-color-parameter.png and /dev/null differ diff --git a/components/chart/types/images/heatmap-colorfield-parameter.png b/components/chart/types/images/heatmap-colorfield-parameter.png deleted file mode 100644 index 52abf987a3..0000000000 Binary files a/components/chart/types/images/heatmap-colorfield-parameter.png and /dev/null differ diff --git a/components/chart/types/images/heatmap-hidden-labels.png b/components/chart/types/images/heatmap-hidden-labels.png deleted file mode 100644 index 4ec3148c2f..0000000000 Binary files a/components/chart/types/images/heatmap-hidden-labels.png and /dev/null differ diff --git a/components/chart/types/images/heatmap-type-parameter.png b/components/chart/types/images/heatmap-type-parameter.png deleted file mode 100644 index 8fe826f53c..0000000000 Binary files a/components/chart/types/images/heatmap-type-parameter.png and /dev/null differ diff --git a/components/chart/types/images/line-chart-step-and-smooth.png b/components/chart/types/images/line-chart-step-and-smooth.png deleted file mode 100644 index d2c6252301..0000000000 Binary files a/components/chart/types/images/line-chart-step-and-smooth.png and /dev/null differ diff --git a/components/chart/types/images/multiple-donut-series.png b/components/chart/types/images/multiple-donut-series.png deleted file mode 100644 index 30541864de..0000000000 Binary files a/components/chart/types/images/multiple-donut-series.png and /dev/null differ diff --git a/components/chart/types/images/pie-chart-hide-from-legend.png b/components/chart/types/images/pie-chart-hide-from-legend.png deleted file mode 100644 index 78cde2ff37..0000000000 Binary files a/components/chart/types/images/pie-chart-hide-from-legend.png and /dev/null differ diff --git a/components/chart/types/line.md b/components/chart/types/line.md index 9ec16b0d84..3a43028e21 100644 --- a/components/chart/types/line.md +++ b/components/chart/types/line.md @@ -12,10 +12,6 @@ position: 0 The Blazor Line chart displays data as continuous lines that pass through points defined by the values of their items. It is useful for rendering a trend over time and comparing several sets of similar data. ->caption Line chart. Results from the first code snippet below - -![](images/basic-line-chart.png) - @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) #### To create a line chart: diff --git a/components/chart/types/pie.md b/components/chart/types/pie.md index f5f78582a2..4b25a7b5f5 100644 --- a/components/chart/types/pie.md +++ b/components/chart/types/pie.md @@ -14,8 +14,6 @@ The Blazor >caption Pie chart. Results from the first code snippet below -![](images/basic-pie-chart.png) - @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) #### To create a pie chart: @@ -131,10 +129,6 @@ Set color to the pie chart items } ```` ->caption The result from the code snippet above - -![](images/custom-color-in-segments.png) - ### Exploded Segment You can have some of the segments of the pie separated from the rest of the circle with a small margin. This helps bring attention to them as outliers or as important bits that the viewer should focus on. @@ -189,10 +183,6 @@ Separate items from the main body of the chart } ```` ->caption The result from the code snippet above - -![](images/exploded-pie-chart.png) - ### Visible In Legend You can hide certain segments from the legend (for example, if their contribution is insignificantly small). To do this, add a boolean field to the model and set its name to the `VisibleInLegendField` property of the pie series. The flags in this field will denote whether the particular item will be rendered in the legend. @@ -250,10 +240,6 @@ Show only some items in the legend } ```` ->caption The result from the code snippet above - -![](images/pie-chart-hide-from-legend.png) - @[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings) @[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings-axis-free) diff --git a/components/chart/types/radar-column.md b/components/chart/types/radar-column.md index dacf881b06..272df88da5 100644 --- a/components/chart/types/radar-column.md +++ b/components/chart/types/radar-column.md @@ -14,11 +14,6 @@ The Bl Scatter charts are useful for showing the relation between different sets of data, for example scientific (experimental) results. ->caption Scatter chart. Results from the first code snippet below - -![](images/basic-scatter-chart.png) - @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) #### To create a scatter chart: diff --git a/components/chart/types/scatterline.md b/components/chart/types/scatterline.md index 71cbb8048d..0dcc8bd16a 100644 --- a/components/chart/types/scatterline.md +++ b/components/chart/types/scatterline.md @@ -14,10 +14,6 @@ The