Chart property: Scatter chart

A scatter chart is used to display the relationship between two numerical variables by plotting data points on an X-Y axis. Each point represents a pair of values, with the X-axis showing one variable and the Y-axis showing the other. This chart is useful for identifying correlations, trends, clusters, or outliers within the data. It helps to visualize how one variable changes in relation to another, such as understanding the relationship between sales and advertising spend. Scatter charts can be enhanced with bubble sizes to represent a third variable or color-coding for categorization. It’s particularly effective for spotting patterns and correlations in datasets.

Advance Properties of Scatter Chart

The user must select at least one attribute and measure for the plotting chart. Based on your data and requirements, choose a chart. To customize the selected chart, click “Customization” to access the advanced properties.

Series

In Series, the user can customize the properties of the selected series.

Users can customize the following options:

1. Select the attribute type from the drop-down menu (In case of more than one measure).
2. Color: If the user has selected Solid Color in the color type option, then the user must choose the color for all the bars.
3. Negative Color: The color for the bar represents negative values of the data.
4. Type: To ensure feasibility, the user can change the chart type directly from the drop-down menu. The menu offers spline, bar, column, line, and scatter charts.
5. Enable Thousand Separator: This will add a thousand separator to the value shown in the chart. For example, if the value is 285082, it will be shown as 285 082 after applying a thousand separator.
6. Formatting Type: The user can change the data format in the chart’s tooltip. The available formats are 123,456,789 and 12,34,56,789; the user can select the format.
7. Precision: Add the values shown after the decimal. For example, if the user enters 2,” the value will be shown as 7564.26″; if entered 3,” the value will be 7564.261.”
8. Abbreviation: The user can add an abbreviation to the value shown in the chart. Options available are none, numeric, time format, and logarithmic.
9. Numeric format: Refers to how numbers are displayed on a chart. Options include none, auto, thousands, millions, and billions. Users can choose the appropriate data points format based on their needs.
10. Remove Space: Removes any spaces between numbers and units/abbreviations (e.g., shows 100K instead of 100 K).
11. Formatter Text: To add the format text with the value. For example, the user can enter “$” in the formatted text box if the value is in dollars.
12. Formatter Text Position: The user has two options to position the formatted text: Right and Left. For example, if the value is 285,082K and the user selects “Right,” the output will be shown as 285,082K$. If “Left” is selected, the output will be $285,082K
13. Order: This is for ordering the visibility of the series. For example, in a line+ grouped chart, if a user selects order 2 for the line series and 1 for the bar series, then the Line will be shown overlapping the bar. This chart works only when the user selects grouped charts.
14. Data Label Horizontal Position and Data Label Vertical Position refer to the placement of data labels on a chart relative to the data points they represent.
15. Hide Series: It hides the selected data series or time series, of which the name is shown in the drop-down; the user can change the series for hiding as required. For example, in the given image, we have selected the Segment series, so if the user checks the Hide Series option, the Segment shown in the chart will be hidden.

General

In General, the user can customize the general properties of the chart. Users can customize the following options:

1. Zoom: The user can zoom into the chart from different angles for a clearer view. First, the user needs to select the zoom option and then drag the part of the chart that the user wants to zoom; the options are:
   • Horizontal zoom: It will zoom horizontally to the part of the chart the user wants to zoom in by dragging it.
   • Vertical zoom: It will vertically zoom to the part of the chart that the user wants to see by dragging it.
   • Zoom for both axes: It will zoom to the part of the chart the user wants to zoom in by dragging it.
2. Chart Background Color: The user can change the chart’s background color according to their needs.
3. Plot Border Color: The color used for the border or outline of the plotting area in a chart. This border can help delineate the area where data points, bars, lines, or other visual elements are displayed, making the chart easier to read and visually appealing.
4. Plot Border Width: Refers to the thickness or width of the border or outline around the plotting area in a chart. A thicker border can make the plotting area stand out more prominently, while a thinner border can provide a more subtle delineation.
5. Background: Here, the user can set the background color.
6. The user can enable the following:
   • Show data labels: This shows the labels on the top of the bar; the user can enable or disable it by checking or unchecking the box.
   • Allow data label overlap: This setting controls whether data labels (names, values, or percentages) overlap on the chart or graph.
   • Auto-align chart if multiple y-axis: This feature adjusts the chart’s alignment when multiple Y-axis are present. By adequately positioning and scaling the axes, this feature ensures that the chart remains clear and readable.
7. Data Label Font Size: Refers to the text size used for data labels on a chart. It determines how large or small the text appears when displaying numerical values or labels directly on data points, bars, or other chart elements.
8. Data Label Color: This setting refers to the color used for the text of data labels displayed on a chart. It allows users to customize the appearance of the labels that accompany data points, bars, or other elements in a chart.
9. Hover Background Color: The user can change the point hover background color, which is visible when the user hovers on the chart.
10. Enable Data Toggle: The user can enable or disable the data toggle by checking or unchecking the box. It will be implemented when publishing the chart, allowing the user to click the drop-down and select the option as feasible. For example, we have enabled the data toggle option by checking the box and published our dashboard, where we got the toggle for changing the discount from a number to a percentage.

Legends

In Legends, the user can customize the legend’s chart properties.

Users can customize the following options:

1. Show Chart Legends: Check or uncheck the box to enable or disable this option to show the chart legends.
2. Align Legends: The user can align the legends to the left, center, or right.
3. Legends Position: The user can also change the legend’s position to the top, middle, or bottom.
4. Legends Background Color: This is the color of the legend, which will be seen in the legend’s background. The user can select the color based on feasibility.

Spacing

In Spacing, the user can customize the spacing of the chart. Users can customize the following options:

1. Margin Top: The user can customize the margin of the chart from the top. It is set to 0 as the default; increasing the value will increase the margin from the top.
2. Margin Bottom: The margin from the bottom can be customized by the user. It is also set to 0 by default; increasing the value will increase the margin from the bottom.
3. Margin Left: The user can customize the margin of the chart from the left. It is set to 0 as the default; increasing the value will increase the margin from the left side of the chart.
4. Margin Right: The user can customize the margin on the right. It is also set to 0 by default; increasing the value will increase the margin from the right side of the chart.
5. Spacing Top: It defines the spacing of legends from the chart area. For example, if we increase the spacing from the top, the legend will be pushed downward.
6. Spacing Bottom: It defines the spacing of legends from the chart area. For example, if we increase the spacing from the bottom, the legend will be pushed upward.
7. Spacing Left: It defines the spacing of legends from the chart area. For example, if we increase the spacing from the left, the legend will be pushed more rightward.
8. Spacing Right: It defines the spacing of legends from the chart area. For example, if we increase the spacing from the left, the legend will be pushed more leftward.

Tooltip

In Tooltip, the user can customize the tooltip properties of the chart. Users can customize the following options:

1. Enabled: To enable the tooltip in the chart, the user must check this box. After that, the user can see the tooltip when they hover over the chart.
2. Background Color: The user can change the tooltip background color.
3. Font Color: Now, the user can change the font color used in the tooltip to match the background color.
4. Border Radius: The user can also change the radius of the tooltip box to get the tooltip appearance as per feasibility.
5. Border Width: To change the border width of the tooltip, the user can increase the value, and the border width will increase accordingly.
6. Border Color: The user can also change the border color of the tooltip.
7. Hide Delay: This is to change the delay time of the tooltip disappearance. The user can increase it to increase the delay time more or decrease it to decrease the delay time of the tooltip in a chart after the user hovers above it.
8. Show Shared Tooltip: This option is not applicable for vertical charts (1 measure or attribute); it is applicable for grouped bar charts.
9. Show Splitted Tooltip: This option is not applicable for vertical bar charts (1 measure or attribute); it is applicable for grouped bar charts.

Value Scale (Y-axis)

Value Scale (Y-axis): The user can customize the value scale of the Y-axis in the chart.

Users can customize the following options:

1. Grid Line Width: The user can change the width of the grid line of the Y axis in the chart; these are the horizontal lines presented at specific intervals.
2. Scale Interval: The user can change the scale of the interval; the value after the interval will be there.
3. Allow Decimal Scale: This feature determines whether a chart’s scale can display decimal values. When enabled, the chart’s axis can show numbers with decimal points, providing more precise data representation.
4. Min Value: Set the minimum value of the Y-axis from where the Y-axis value begins in the chart.
5. Max Value: To set the maximum value of the Y-axis from where the Y-axis value ends in the chart.
6. Labels Font Size: Users can change the Y-axis labels font size.
7. Label: The user can change the label of the Y-axis.
8. Title Margin: The user can adjust the margin of the Y-axis title.
9. Start Control: This is the initial point value for the Y-axis, which is visible in the chart.
10. End Control: It represents the final point for the Y-axis.
11. Set Format: This option allows users to define how data is displayed on a chart or graph. It typically includes the following formats: Numeric, Time format, and Logarithmic.
12. Numeric format: Refers to how numbers are displayed on a chart. Options include none, auto, thousands, millions, and billions. Users can choose the appropriate data points format based on their needs.
13. Formatting Type: The user can change the data format in the chart’s tooltip. The available formats are 123,456,789 and 12,34,56,789; the user can select the format.
14. Label Color: This setting allows users to customize the color of text labels on a chart. Labels can include titles, axis labels, data point labels, and legends. Adjusting the label color helps improve readability, contrast, and the overall aesthetic of the chart, ensuring that the information is visible and visually appealing.
15. Label Title Color: This setting allows users to customize the color of the title labels on a chart, such as the main title, axis titles, and section headers.

Category Scale (X-axis)

In Category Scale (X), the user can customize the category scale of the X-axis in the chart.

Users can customize the following options:

1. Grid Line Width: The user can change the grid line width on the X-axis in the chart; these are the vertical lines presented on the X-axis.
2. Font Size: The user can change the font size on the X-axis.
3. Scroll After Width: This allows the user to limit the number of bars shown on the chart. For example, if the user enters five as a value, the chart will show only five bars out of the total; to view more than five bars, the user must scroll. In a vertical bar chart, the user needs to scroll from left to right, and in a horizontal bar chart, the user needs to scroll from top to bottom.
4. Title: This is the title of the X-axis; the user can give the title of their choice.
5. Label Color: This setting allows users to customize the color of text labels on a chart. Labels can include titles, axis labels, data point labels, and legends. Adjusting the label color helps improve readability, contrast, and the overall aesthetic of the chart, ensuring that the information is visible and visually appealing.
6. Label Title Color: This setting allows users to customize the color of the title labels on a chart, such as the main title, axis titles, and section headers.
7. Line width: It controls the thickness of the grid lines in the chart. Increasing it makes the horizontal and vertical guide lines behind the bars appear bolder and more prominent.
8. Tick width: It controls the thickness of the tick marks on the axes. These are the small marks along the X-axis and Y-axis that indicate scale divisions. A higher tick width makes these marks more visible.

Analysis Line

Visual lines in a chart represent trends, patterns, or relationships between data points. They are commonly used in line charts, scatter plots, and other charts to visually connect data points and represent the data’s behavior over a continuous range.

Here are some critical aspects of visual lines in charts:

1. Trend Representation: Visual lines in a chart can represent the overall trend or direction of the data. The line connects the data points in a line chart, allowing viewers to observe the data’s upward, downward, or flat trends. This helps in understanding the overall pattern or trajectory of the data series.
2. Interpolation: Visual lines can be used to interpolate between data points, estimating the data’s value at specific points within the range. This is particularly useful when the data is unavailable for every moment, and you want to infer the values between the data points.
3. Smoothness: The smoothness of the visual line can vary depending on the chart and the data being represented. In some cases, the line may be a straight connection between data points, while in other cases, it may be a curved or smoothed line that provides a more continuous representation of the data’s behavior.
4. Highlighting Relationships: Visual lines can highlight relationships between data series or variables. For example, in a scatter plot, connecting the data points with lines can reveal correlations or associations between variables, indicating the strength and direction of the relationship.

The best usage of visual lines in a chart depends on your data analysis’s specific goals and context. Here are some common scenarios where visual lines can be effectively utilized:

1. Trend Analysis: Visual lines help analyze trends over time or a continuous range. Line charts are commonly employed to showcase the progression of data points, enabling you to observe patterns, fluctuations, or overall trends. This is beneficial for tracking metrics such as sales figures, stock prices, or website traffic over a period.
2. Comparative Analysis: Visual lines can help compare multiple data series or variables within a chart. Connecting the data points with lines lets you visually assess the relative performance or relationship between categories or groups. This is valuable when examining market share, comparing product sales, or evaluating performance across different regions.
3. Storytelling and Data Communication: Visual lines can enhance storytelling and data communication by providing a straightforward narrative or highlighting critical points in the data. Using lines strategically can guide the audience’s attention, emphasize significant trends or turn points, and facilitate comprehension of your data story.

Steps to add an analysis line:

• Click “Add New” to insert an analysis line.
• Next, specify the conditions for the analysis line by selecting the visual line type, either custom or dynamic. For a custom visual line, enter the specific value. For a dynamic visual line, choose the measure to be used.

Let’s see both conditions:

Case 1: Custom Visual Line

In a custom visual line, the user can set the value manually.

Case 2: Dynamic Visual Line

In a dynamic visual line, the user selects a measure from the given measures and chooses the aggregate of Sum/Average/Minimum/Maximum.

• After selecting the chart type and entering the value, the user can choose the line style and color.
• Position: The user can select the position of the visual line, whether it will be visible in the front of the bars or at the back.
• Transparency: The user can increase or decrease the transparency of the visual line by dragging the slider.

• Data Label: This option allows the user to customize the data label options of the visual line. By checking or unchecking the box, the user can enable or disable the data label.

After enabling the data label, the following fields will appear:

• • Color (Data Name): The user can change the color of the name given to the visual line.
  • Font size: The font size of the data label user can increase or decrease as needed by simply clicking on + to increase and – to reduce the font size.
  • Font style: Style of the data label font; the user can select from the three font styles: bold, italic, and underlined font.
  • Show Data Name: By enabling this option, the user can add a name to the visual line by entering the field provided.
  • Show Data Value: The data value entered by the user will be visible in the chart when this option is enabled. The user must check the box to display the data value.

When you enable the “Show Data Value” option, the following settings are available:

• • • Enable Thousand Separator
    • Formatting type
    • Precision
    • Formatter text
    • Formatter text position
    • Abbreviation
    • Numeric format

Note: Refer to the section “General” for details.

• • Position: The user can change the data label’s position and value from the visual line.
  • Alignment: Same as position, the user can also change the alignment of the data name and value. There are three options: Left, Middle, and Right.
  • Alignment margin: The user can align the margin of the data label from the chart plot; if the user increases the margin in a vertical chart, the data label will move towards the right side, and in a horizontal chart, the data label will move downward and vice versa.

Note: Similarly, users can create multiple rules for visual lines.

• Click the “pencil” icon to edit the visual line.
• Click the “trash” icon to delete the visual line.