Mito is a very advanced chart that is based on mitochondrial DNA study. The Mito-plot chart shows the basic structure of mitochondrial DNA, as shown in the figure. Mito-Plot chart divided into different segments each segment produces a protein (RNA type) these proteins is essential during the cellular respiration cycle. These segments have been defined through the category, and its color depends on the RNA type what it contains. Mitochondrial DNA has two strands, and that can be differentiated based on their nucleotide content, these two strands are a heavy strand or H-strand and a light strand or L-strand. H-strand is a genuine rich strand and represents through the segment which orientation towards outside. L-strand is a cytosine-rich strand that represents through the segment which orients towards inside.
Check out the below given walk-through on how to use the Mito Plot chart component in Designer module.
Medical experts can use this chart to visualize mitochondrial DNA damage specific to individuals.
The Export Options also helps to provide a heading, subheading, and file name. The user can also select a Global Export Type option.
The user can enable the Enable Context Menu from the preview section to download the reports in different formats.
The General Properties section allows the user to customize various aspects of the component. Here are the fields you can modify:
Component Name: Set a unique name for the component identification. This field contains an auto-generated name indicating the sequence of the component in the dashboard.
Left & Top: Define the component's position on the screen by setting the left and top margins.
Height & Width: Specify the dimensions to ensure the component fits the desired space.
Initial Visibility: Determine if the component should be visible initially; if unchecked, it won't appear on the first preview.
Max Button: Enable the option to maximize the component, allowing users to expand it for better visibility.
Series Colors: Customize the colors of the series, for the Mito chart to distinguish different segments.
Chart Alignment: Adjust the alignment of the chart within the container, choosing from Center, Right, or Left.
The user who wants to show the series description can use the tooltip by enabling it.
The user can show the series description and get the tooltip by clicking the Show Tool Tip option.
The Tool Tip Configuration window opens.
Select any Tool Tip option. The supported Tool Tip is None and Custom.
Click the Save option.
The tooltip is a useful feature that provides additional information when interacting with chart elements. Here are the properties you can configure:
Background Color: Set the tooltip background color to enhance its visibility and appearance.
Opacity: Adjust the transparency level of the tooltip to ensure that the information is visible without obstructing the view of the main chart.
Border Color: Define the color of the tooltip's border to make it stand out against the background.
Tooltip Font Size: Specify the font size within the tooltip for better readability.
Box Width: Set the width of the tooltip box to accommodate the content and maintain a tidy layout.
Precision: Choose the decimal precision to display numerical data accurately in the tooltip, allowing for more precise data representation.
Gradient Rotation: Modify the angle of the gradient to achieve the desired effect.
Opacity: Set the transparency level to balance visibility and aesthetics.
Gradient: Choose and customize the gradient colors to match your theme.
Click the Gradient icon.
Click the Gradient icon to access the Background gradient colors dialog box.
Click the Add Color option to add multiple colors.
Border: Add a border around the chart for a defined perimeter.
Border Color: Alter the border color to complement or contrast with the chart.
Border Radius: Round the corners of the chart border for a smoother look.
Shadow: Enable shadows to create depth and a 3D-like effect.
Shadow Color: Customize the shadow color to blend naturally with the chart.
Shadow Transparency: Adjust the transparency level to control the intensity of the shadow effect.
Title Box Color: Choose the background color for the title box.
Show Title Box: Enable or disable the display of the title box on the chart.
Show Title: Enable or disable the display of the title text.
Title Bar Height: Set the height of the title bar.
Description: Add a description text below the title.
Font Color: Select the color of the title text.
Font Size: Specify the size of the title text.
Font Style: Choose a Font style using the drop-down menu (e.g., italic or normal).
Font Weight: Set the weight (boldness) of the font. The supported options are Normal, Bold, 300, 600, and 900.
Font Family: Choose the font family for the title text from the given choices.
Align: Align the title text (e.g., left, center, right).
Text Decoration: Apply text decorations (e.g., underline) to the title text.
Show Dataset Description: Enable or disable the dataset description in the title.
Please Note: The Title will be added from the mapped dataset if the Show Dataset Description option is enabled.
Show Sub Title: Enable or disable the display of the sub-title text.
Description: Add a description text below the sub-title.
Font Color: Select the color of the sub-title text.
Font Size: Specify the size of the sub-title text.
Font Style: Choose the font style for the Sub-title (e.g., italic or normal).
Font Weight: Set the weight (boldness) of the font. The supported options are Normal, Bold, 300, 600, and 900.
Font Family: Choose the font family for the sub-title text from the given choices.
Align: Align the sub-title text (e.g., left, center, right).
Enable Context Menu: Activate a right-click context menu for quick access to export options in the preview mode of the chart.
Export Excel: Save the chart data in an Excel file format (.xlsx).
Export CSV: Export the chart data into a CSV file format (.csv).
Export JPEG: Export the chart as a JPEG image (.jpg).
Export PNG: Export the chart as a PNG image (.png).
Export PPT: Export the chart to a PowerPoint presentation (.pptx).
Export PDF: Export the chart as a PDF document (.pdf).
Show Print: Include an option to print the chart directly.
Export Heading: Add a custom heading to the exported file.
Export Sub Heading: Add a custom subheading to the exported file.
Export File Name: Specify the file name for the exported file/dashboard.
Global Export Type: Define the default export format using the drop-down (e.g., Screenshot, Tabular).
By enabling the field the user gets a context menu with various export options to download the report in the Preview mode.
Download the given sample data and map it as mentioned below to plot your Mito chart.
Use the Patient_seq column as Category field, Color_rnaType column as RNA Type, orientation column as Orientation field, start column as Start field, stop column as Stop field, and dataLabel_pos column as Marker field to plot data.
Click the Save option to apply the selected background colors.
Text Decoration: Apply text decorations (e.g., underline) to the sub-title text.
