diff --git a/learn/react-native/chart-tooltips.md b/learn/react-native/chart-tooltips.md new file mode 100644 index 000000000..434110422 --- /dev/null +++ b/learn/react-native/chart-tooltips.md @@ -0,0 +1,274 @@ +--- +title: "Chart Tooltips" +id: "chart-tooltips" +sidebar_label: "Chart Tooltips" +--- +--- + +import charttooltipparts from '/learn/assets/charttooltip-parts.png'; +import charttooltip from '/learn/assets/charttooltip.png'; +import defaultcharttooltip from '/learn/assets/default-tooltip.png'; +import customcharttooltip from '/learn/assets/charttooltip-example.png'; +import styledcharttooltip from '/learn/assets/styled-tooltip.png'; + +A Chart Tooltip is an element that appears when you hover over or interact with a specific data point or component within a chart. This floating text box provides additional information about the data point, such as its exact value, category, or other relevant details, enhancing user understanding of the chart. + + + +## WaveMaker Inbuilt Tooltip + +By default, we have Chart tooltip that displays the x-axis and y-axis values as shown below. + + + +## Customizing Chart Tooltip + +You can add the basic style changes like font, background color, and text size of the default Tooltip by the given [CSS classes](#styling-inbuilt-tooltip). + + + +:::note + +CSS classes for styling are Chart specific. + +::: + + +In cases where you need to create a completely different Tooltip where changes are done to the Tooltip content, you can easily create a custom Tooltip by following steps in [Custom Tooltip](#creating-custom-tooltip). + + + + +## Styling Inbuilt Tooltip + +The Tooltip provided by default can be categorized into four segments for customization. + +- **Tooltip Container**: The main box that holds the tooltip content.​ +- **Tooltip Pointer**: The small arrow or indicator pointing to the data point.​ +- **X-Axis Label**: The label displaying information related to the x-axis value.​ +- **Y-Axis Label**: The label displaying information related to the y-axis value. + + + + +​The following CSS classes can be utilized in the Style section to customize various parts of the default tooltip, as shown in the image above: + +- **Tooltip Container:** + +```css + +.app-column-chart-tooltip-container { + /* Your styles here */ +} + +``` + +- **Tooltip Pointer:** + +```css + +.app-column-chart-tooltip-pointer { + /* Your styles here */ +} + +``` + +- **X-Axis Label:** + +```css + +.app-column-chart-tooltipx-text { + /* Your styles here */ +} + +``` + +- **Y-Axis Label:** + +```css + +.app-column-chart-tooltipy-text { + /* Your styles here */ +} + +``` + +### Styling Tooltip Pointer + +The properties to style the Tooltip pointer using the CSS class, `.app-column-chart-tooltip-pointer` are given below. + +```css +/* To change the pointer color use border-bottom-color property */ + +border-bottom-color: "blue"; + +/* To change the height of the pointer use border-left-width and border-right-width properties */ + +border-left-width: 10px; +border-right-width: 10px; + +/* To change the width of pointer use border-bottom-width property */ + +border-bottom-width: 15px; + +``` + + + +## Creating Custom Tooltip + +A Partial can be created as a Tooltip for a chart in your application. This approach allows you to reuse the Partial with the tooltip across the application in any number of instances. + +### Creating Partial Page + +1. Create a new page and designate it as a Partial page. This page will serve as the tooltip for your Chart. +2. Add an page parameter called `item` to the partial page. This parameter will contain the selected `item` information, including the `index`,`name`, and `value`, which can be used in the Partial to create the Tooltip. +3. Drag and Drop the necessary widgets like, labels or container to the partial page to display the information from the selected item. +4. Bind the item parameter to these widgets to ensure the tooltip displays the correct data. + +### Binding Partial to Chart + +1. Navigate to the Script section of the page where the Chart widget is used. +2. To bind, use the following syntax to bind the Partial to the Chart as its tooltip. + +```javascript +Page.Widgets.{chartname}.setTooltipTemplate({partialname}); +``` + +Replace `{chartname}` with the name of your Chart widget and `{partialname}` with the name of your Partial page. + +### Example + +​To understand how to create and bind a Partial as Chart Tooltip, you can refer to the following example. + +1. Use the following dataset for chart. + +```javascript +[ + { + "name": "YTD", + "value": 5000 + }, + { + "name": "3M", + "value": 8000 + }, + { + "name": "1Y", + "value": -2500 + }, + { + "name": "3Y", + "value": 5500 + }, + { + "name": "5Y", + "value": -5000 + }, + { + "name": "Since \n enrollment", + "value": 9000 + } +] +``` + +2. Create a Partial page and use the following code in the Markup section. In this code you can find two label widgets being used. + +```xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +3. To set the basic alignment and other customization of the chart and tooltip, use the following code in the Style section of the Partial. + +```css + +.tooltipContainer .app-linearlayout { + border-radius: 20px; + opacity: 0.8; +} + +.item .app-linearlayoutitem { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.app-linearlayoutitem { + margin-top: 2; + margin-bottom: 2; +} + +``` + +4. For binding, navigate to the scripts section of the page where the chart is being used. You can use the below code in the Script section. + +```javascript + +Page.Widgets.chart1.setTooltipTemplate("Tooltip"); + +``` + +5. Add the below CSS code to the Style section of the page where Chart is being used to customize the pointer of the Tooltip. + +```css +.app-bar-chart-tooltip-pointer { + border-bottom-color: #373434; +} +``` + + +
+