Next

docs/calendar/configuring.md

@@ -16,7 +16,7 @@ There are several modes of displaying Calendar, which are set via the [](calenda
 const calendar = new dhx.Calendar("calendar_container");
 ~~~
 
-![](../assets/calendar/calendar_mode.png)
+![Calendar in default day mode showing the month grid for July 2019 in DHTMLX Suite](/img/calendar/calendar_mode.png)
 
 - **"month"** - only months of the current year are shown in the calendar 
 
@@ -26,7 +26,7 @@ const calendar = new dhx.Calendar("calendar_container", {
 });
 ~~~
 
-![](../assets/calendar/month_mode.png)
+![Calendar in month mode listing the twelve months of 2019 in DHTMLX Suite](/img/calendar/month_mode.png)
 
 - **"year"** - only years are shown, including the current one
 
@@ -36,7 +36,7 @@ const calendar = new dhx.Calendar("calendar_container", {
 });
 ~~~
 
-![](../assets/calendar/year_mode.png)
+![Calendar in year mode showing the years 2016 to 2027 in DHTMLX Suite](/img/calendar/year_mode.png)
 
 **Related sample**: [Calendar. Calendar modes](https://snippet.dhtmlx.com/n9q0tc0q)
 
@@ -57,7 +57,7 @@ const calendar = new dhx.Calendar("calendar_container", {
 
 ## Disabled dates
 
-![](../assets/calendar/blocked_dates.png)
+![Calendar month view with weekend days disabled and dimmed in DHTMLX Suite](/img/calendar/blocked_dates.png)
 
 **Related sample**: [Calendar. Marked and disabled dates](https://snippet.dhtmlx.com/ic5oeiga)
 
@@ -84,7 +84,7 @@ const calendar = new dhx.Calendar("calendar_container", {
 
 ## Displaying only current month
 
-![](../assets/calendar/this_month_only.png)
+![Calendar showing only the current month days without adjacent month dates in DHTMLX Suite](/img/calendar/this_month_only.png)
 
 **Related sample**: [Calendar. The days of this month only](https://snippet.dhtmlx.com/4wi5hbtr)
 
@@ -98,7 +98,7 @@ const calendar = new dhx.Calendar("calendar_container", {
 
 ## Highlighted dates
 
-![](../assets/calendar/marked_dates.png)
+![Calendar month view with Saturdays highlighted by red circular markers in DHTMLX Suite](/img/calendar/marked_dates.png)
 
 **Related sample**: [Calendar. Marked and disabled dates](https://snippet.dhtmlx.com/ic5oeiga)
 
@@ -190,7 +190,7 @@ Please note that the format of date in the Calendar is defined by the dateFormat
 
 ## Numbers of weeks
 
-![](../assets/calendar/week_numbers.png)
+![Calendar month view with week numbers shown in a left-hand column in DHTMLX Suite](/img/calendar/week_numbers.png)
 
 **Related sample**: [Calendar. Numbers of weeks](https://snippet.dhtmlx.com/9692gk6n)
 
@@ -204,7 +204,7 @@ const calendar = new dhx.Calendar("calendar_container", {
 
 ## Range mode
 
-![](../assets/calendar/range_mode.png)
+![Calendar in range mode with a span of dates highlighted in July 2020 in DHTMLX Suite](/img/calendar/range_mode.png)
 
 **Related sample**: [Calendar. Range](https://snippet.dhtmlx.com/2mrj53h0)
 
@@ -224,7 +224,7 @@ The **value** option should have the array type and contain a pair of values (ei
 
 ## Start of the week
 
-![](../assets/calendar/weekstart_monday.png)
+![Calendar month view with the week starting on Monday in DHTMLX Suite](/img/calendar/weekstart_monday.png)
 
 **Related sample**: [Calendar. Week start](https://snippet.dhtmlx.com/kaxmurh9)
 
@@ -248,15 +248,15 @@ const calendar = new dhx.Calendar("calendar_container", {
 });
 ~~~
 
-![](../assets/calendar/timepicker_format.png)
+![Two Calendars comparing 24-hour and 12-hour timepicker formats in DHTMLX Suite](/img/calendar/timepicker_format.png)
 
 **Related sample**: [Calendar. Timepicker In Calendar](https://snippet.dhtmlx.com/jkbfb202)
 
 **Related sample**: [Calendar. Time format](https://snippet.dhtmlx.com/9xi24if2)
 
 ## Width of calendar
 
-![](../assets/calendar/calendar_width.png)
+![Calendar month view rendered at a wider custom width in DHTMLX Suite](/img/calendar/calendar_width.png)
 
 **Related sample**: [Calendar. Calendar width](https://snippet.dhtmlx.com/azm0u5ns)
 

docs/calendar/customization.md

@@ -10,7 +10,7 @@ description: You can explore the customization of Calendar in the documentation
 
 There is a possibility to make changes in the look and feel of a calendar. For example, change its background color:
 
-![](../assets/calendar/styled_calendar.png)
+![Calendar month view styled with a custom teal primary color in DHTMLX Suite](/img/calendar/styled_calendar.png)
 
 **Related sample**: [Calendar. Styling (custom CSS)](https://snippet.dhtmlx.com/2045cbe1)
 
@@ -56,7 +56,7 @@ For example:
 
 ## Styling selected dates
 
-![](../assets/calendar/calendar_range_styling.png)
+![Two Calendars with a custom red selected date and pink range highlight in DHTMLX Suite](/img/calendar/calendar_range_styling.png)
 
 **Related sample**: [Calendar. Custom styles for selected date](https://snippet.dhtmlx.com/9u0ix3na)
 

docs/calendar/datepicker.md

@@ -8,7 +8,7 @@ description: You can explore the DatePicker of Calendar in the documentation of
 
 You can use DHTMLX Calendar as a date picker by putting it inside a popup. 
 
-![Date picker](./../assets/calendar/date_picker.png)
+![Calendar used as a date picker popup attached to a date input field in DHTMLX Suite](/img/calendar/date_picker.png)
 
 First, you should create a popup and then attach a calendar into it. Follow the steps below:
 

docs/calendar/index.md

@@ -8,7 +8,7 @@ description: You can have an overview of Calendar in the documentation of the DH
 
 DHTMLX Calendar is a component that allows users to view and select dates. You can create calendar in one of 4 modes: days, months, years, or as a timepicker. This component is a great date picker solution for your website or application. Check [online samples for DHTMLX Calendar](https://snippet.dhtmlx.com/jkbfb202?tag=calendar).  
 
-![DHTMLX Calendar](../assets/calendar/calendar_front.png)
+![Calendar month view for April 2019 with the 16th selected and a timepicker in DHTMLX Suite](/img/calendar/calendar_front.png)
 
 ## Features
 

docs/calendar/localizing_calendar.md

@@ -8,7 +8,7 @@ description: You can explore the localization of Calendar in the documentation o
 
 You can apply different languages to the interface of dhtmlxCalendar. You just need to translate the corresponding strings for Calendar labels and apply a ready locale to the component.
 
-![](../assets/calendar/locale.png)
+![Calendar localized into German with translated month and day names in DHTMLX Suite](/img/calendar/locale.png)
 
 ## Default locale
 

docs/calendar/operating_calendar.md

@@ -97,7 +97,7 @@ const date = calendar.getValue(); // ->  ["03/06/19", "19/06/19"]
 You can create two calendars and link them to provide the ability of selecting a date range. The first calendar will be used for setting the start date of the range, while the end date of the range will be specified in the
 second calendar.
 
-![](../assets/calendar/date_range.png)
+![Two linked Calendars selecting a date range across July and August in DHTMLX Suite](/img/calendar/date_range.png)
 
 Use the [](calendar/api/calendar_link_method.md) method and pass as a parameter the object of the second calendar to link the first calendar to. In the example below the [Change](calendar/api/calendar_change_event.md) event is intended to output the start and end dates of the selected range:
 
@@ -160,7 +160,7 @@ In case a date has been successfully added into the calendar, the method will re
 
 You can add tooltips for dates and show them on the [](calendar/api/calendar_datemouseover_event.md) event. For example, you can add tooltips to mark some special days:
 
-![](../assets/calendar/tooltips.png)
+![Calendar month view showing a Mum's birthday tooltip on a hovered date in DHTMLX Suite](/img/calendar/tooltips.png)
 
 ~~~js
 const special_days = {

docs/chart/charts_overview.md

@@ -34,15 +34,15 @@ how the number of staff has increased over several years. Choose this variant wh
 
 ### Line chart
 
-![Line chart](../assets/chart/line_overview.png)
+![Line chart comparing four company data series over time in DHTMLX Suite](/img/chart/line_overview.png)
 
 **Related sample**: [Chart. Line chart initialization](https://snippet.dhtmlx.com/t881qcim)
 
 **Related article:** [Line and Spline chart configuration](chart/configuration_properties.md#line-and-spline-chart)
 
 ### Spline chart
 
-![Spline chart](../assets/chart/spline_overview.png)
+![Spline chart with smooth curved lines for three company series in DHTMLX Suite](/img/chart/spline_overview.png)
 
 **Related sample**: [Chart. Spline chart initialization](https://snippet.dhtmlx.com/2wvmdm0y)
 
@@ -54,15 +54,15 @@ The same as Line chart it displays data for certain periods. It greatly suits yo
 
 ### Bar chart
 
-![Bar chart](../assets/chart/bar_overview.png)
+![Vertical bar chart comparing three company series across periods in DHTMLX Suite](/img/chart/bar_overview.png)
 
 **Related sample**: [Chart. Bar chart initialization](https://snippet.dhtmlx.com/id9nbujd)
 
 **Related article:** [Bar and X-Bar chart configuration](chart/configuration_properties.md#bar-and-x-bar-chart)
 
 ### X-Bar chart
 
-![X-Bar chart](../assets/chart/xbar_overview.png)
+![Horizontal X-Bar chart comparing two sales series by year in DHTMLX Suite](/img/chart/xbar_overview.png)
 
 **Related sample**: [Chart. X-Bar chart initialization](https://snippet.dhtmlx.com/qz80yw84)
 
@@ -74,15 +74,15 @@ Area chart is based on the Line chart. The difference is that areas below lines
 
 ### Area chart
 
-![Area chart](../assets/chart/area_overview.png)
+![Area chart with color-filled regions for three company series in DHTMLX Suite](/img/chart/area_overview.png)
 
 **Related sample**: [Chart. Area chart initialization](https://snippet.dhtmlx.com/nv6t6lvm)
 
 **Related article:** [Area and SplineArea chart configuration](chart/configuration_properties.md#area-and-splinearea-chart)
 
 ### SplineArea chart
 
-![SplineArea chart](../assets/chart/splinearea_overview.png)
+![SplineArea chart with smooth curved filled regions for three series in DHTMLX Suite](/img/chart/splinearea_overview.png)
 
 **Related sample**: [Chart. Spline Area chart initialization](https://snippet.dhtmlx.com/bo82km4n)
 
@@ -94,7 +94,7 @@ Pie chart and its variations are the best choice when you deal with proportions
 
 ### Pie and Pie 3D chart
 
-![Pie and Pie 3D charts](../assets/chart/pie_overview.png)
+![Flat pie chart and 3D pie chart showing monthly category shares in DHTMLX Suite](/img/chart/pie_overview.png)
 
 **Related sample**: [Chart. Pie chart initialization](https://snippet.dhtmlx.com/jfbet749)
 
@@ -104,7 +104,7 @@ Pie chart and its variations are the best choice when you deal with proportions
 
 ### Donut chart
 
-![Donut chart](../assets/chart/donut_overview.png)
+![Donut chart showing monthly category shares as a ring in DHTMLX Suite](/img/chart/donut_overview.png)
 
 **Related sample**: [Chart. Donut chart initialization](https://snippet.dhtmlx.com/lobb80ig)
 
@@ -115,7 +115,7 @@ Pie chart and its variations are the best choice when you deal with proportions
 This one is a two-dimensional chart that allows placing one or several series of values over multiple numerical variables. For example, Radar chart will help you to study how a number of parameters 
 relate to one item (the center point of a chart) and compare their values.
 
-![Radar chart](../assets/chart/radar_overview.png)
+![Radar chart plotting two data series across multiple axes in DHTMLX Suite](/img/chart/radar_overview.png)
 
 **Related sample**: [Chart. Radar chart initialization](https://snippet.dhtmlx.com/6otf4h0t)
 
@@ -125,7 +125,7 @@ relate to one item (the center point of a chart) and compare their values.
 
 The peculiarity of Scatter Chart is that it allows exploring relations between two sets of data in order to find out possible dependencies or patterns.
 
-![Scatter chart](../assets/chart/scatter_overview.png)
+![Scatter chart plotting two value series as points on XY axes in DHTMLX Suite](/img/chart/scatter_overview.png)
 
 **Related sample**: [Chart. Scatter chart initialization](https://snippet.dhtmlx.com/pkczfmpu)
 
@@ -135,7 +135,7 @@ The peculiarity of Scatter Chart is that it allows exploring relations between t
 
 A treemap chart presents a hierarchical visualization of data as a set of rectangular tiles and makes it easy to spot patterns. Several tiles can be collected into a group. The sizes of tiles are proportional to the values of the data items they represent.
 
-![Treemap chart](../assets/chart/treemap.png)
+![Treemap chart sizing planets by value with a color legend in DHTMLX Suite](/img/chart/treemap.png)
 
 **Related sample**: [Chart. Treemap chart initialization](https://snippet.dhtmlx.com/p31wzm0b)
 
@@ -153,7 +153,7 @@ The calendar heatmap chart is a two dimensional calendar view that uses graduate
 
 The chart helps to display and identify daily patterns or anomalies over the necessary period.
 
-![Calendar heatmap chart](../assets/chart/heatmap_overview.png)
+![Calendar heatmap chart showing daily profit values by color over a year in DHTMLX Suite](/img/chart/heatmap_overview.png)
 
 **Related samples:**
 

docs/chart/customization.md

@@ -10,7 +10,7 @@ description: You can explore the customization of Chart in the documentation of
 
 There is a possibility to make changes in the look and feel of a chart.
 
-![](../assets/chart/custom_style.png)
+![Bar chart styled with custom CSS on a dark background and orange bars in DHTMLX Suite](/img/chart/custom_style.png)
 
 **Related sample**: [Chart. Styling (custom CSS)](https://snippet.dhtmlx.com/p82iew5s)
 
@@ -81,7 +81,7 @@ For example:
 
 ## Adding template to scale labels
 
-![](../assets/chart/text_template.png)
+![Line chart with custom scale labels formatted by a text template in DHTMLX Suite](/img/chart/text_template.png)
 
 **Related sample**: [Chart. Text template for scale labels](https://snippet.dhtmlx.com/nhm3438n)
 
@@ -112,7 +112,7 @@ const chart = new dhx.Chart("chart_container", {
 
 ## Adding color gradient for bars
 
-![](../assets/chart/bar_gradient.png)
+![Bar chart with color gradient fill applied to the bars in DHTMLX Suite](/img/chart/bar_gradient.png)
 
 **Related sample**: [Chart. Bar chart. Gradient](https://snippet.dhtmlx.com/j3duyn2q)
 
@@ -157,7 +157,7 @@ const chart = new dhx.Chart("chart_container", {
 
 ## Adding template to tooltips
 
-![](../assets/chart/show_tooltip.png)
+![Scatter chart with a custom tooltip template showing x and y values in DHTMLX Suite](/img/chart/show_tooltip.png)
 
 **Related sample**: [Chart. Tooltip template](https://snippet.dhtmlx.com/mbz7dkku)
 
@@ -197,7 +197,7 @@ const chart = new dhx.Chart("chart_container", {
 
 ## Adding template to text values of data items in bars
 
-![](../assets/chart/show_text.png)
+![Bar chart with formatted dollar value labels shown on each bar in DHTMLX Suite](/img/chart/show_text.png)
 
 **Related sample**: [Chart. Show text](https://snippet.dhtmlx.com/o7ke2f1s)
 
@@ -248,7 +248,7 @@ const chart = new dhx.Chart("chart_container", {
 
 ## Adding template to values of data items in Pie and Donut charts
 
-![](../assets/chart/show_percent_values.png)
+![Pie chart with percentage value labels on each slice in DHTMLX Suite](/img/chart/show_percent_values.png)
 
 **Related sample**: [Chart. Value template](https://snippet.dhtmlx.com/o7ke2f1s)
 

docs/chart/index.md

@@ -10,7 +10,7 @@ DHTMLX Chart is a great tool for creating powerful charts for web applications.
 both 2D and 3D presentation, different variants of data loading, and a whole kit of configuration settings for all elements of a chart interface. 
 Check [online samples for DHTMLX Chart](https://snippet.dhtmlx.com/bo82km4n?tag=chart). 
 
-![](../assets/chart/line_overview.png)
+![Line chart comparing four company data series with a values tooltip in DHTMLX Suite](/img/chart/line_overview.png)
 
 ## Features
 

docs/colorpicker/configuration.md

@@ -25,7 +25,7 @@ const palette = [
 ];
 ~~~
 
-![](../assets/colorpicker/default_palette.png)
+![ColorPicker default palette of gray shades and color swatches in DHTMLX Suite](/img/colorpicker/default_palette.png)
 
 **Related sample**: [Colorpicker. Initialization](https://snippet.dhtmlx.com/ezk8rk4m)
 
@@ -46,15 +46,15 @@ const colorpicker = new dhx.Colorpicker("colorpicker_container", {
 });
 ~~~
 
-![](../assets/colorpicker/custom_palette.png)
+![ColorPicker with a custom redefined palette of colors without gray shades in DHTMLX Suite](/img/colorpicker/custom_palette.png)
 
 **Related sample**: [Colorpicker. Custom palette and custom colors](https://snippet.dhtmlx.com/097jjhb8)
 
 ## Gray shades
 
 The default configuration of the Colorpicker palette includes a section with gray shades, which is shown at the top of palette. There is a possibility to hide this section showing just main colors: default or custom.
 
-![](../assets/colorpicker/no_shades_palette.png)
+![ColorPicker palette with the gray shades section hidden in DHTMLX Suite](/img/colorpicker/no_shades_palette.png)
 
 **Related sample**: [Colorpicker. Palette without gray shades](https://snippet.dhtmlx.com/b44fp8q2)
 
@@ -68,7 +68,7 @@ const colorpicker = new dhx.Colorpicker("colorpicker_container", {
 
 ## List of custom colors
 
-![](../assets/colorpicker/custom_colors.png)
+![ColorPicker palette with preset user-defined colors in the custom colors row in DHTMLX Suite](/img/colorpicker/custom_colors.png)
 
 When Colorpicker is rendered on a page, its list of custom (user-defined) colors is empty. You can change this configuration and specify custom colors that should be shown in the related section on initialization of 
 the component via the [](colorpicker/api/colorpicker_customcolors_config.md) configuration option. Colors should be specified as an array of strings in the Hex format:
@@ -92,7 +92,7 @@ const colorpicker = new dhx.Colorpicker("colorpicker_container", {
 
 In this mode the palette is not available and only the picker is displayed.
 
-![](../assets/colorpicker/picker_only.png)
+![ColorPicker in picker-only mode with a color gradient field and hex input in DHTMLX Suite](/img/colorpicker/picker_only.png)
 
 **Related sample**: [Colorpicker. Picker only](https://snippet.dhtmlx.com/5zlvvwpl)
 
@@ -104,7 +104,7 @@ const colorpicker = new dhx.Colorpicker("colorpicker_container", {
 });
 ~~~
 
-![](../assets/colorpicker/palette_only.png)
+![ColorPicker in palette-only mode without the custom colors panel in DHTMLX Suite](/img/colorpicker/palette_only.png)
 
 {{note Note that in the **paletteOnly** mode the palette is displayed without the panel with custom (user-defined) colors.}}
 
@@ -131,6 +131,6 @@ const colorpicker = new dhx.Colorpicker("colorpicker", {
 });
 ~~~
 
-![](../assets/colorpicker/colorpicker_transparency.png)
+![ColorPicker in picker mode with a color transparency slider in DHTMLX Suite](/img/colorpicker/colorpicker_transparency.png)
 
 **Related sample**: [Colorpicker. Disable color transparency](https://snippet.dhtmlx.com/ewgu0aps?tag=colorpicker)