Skip to content
Infoveave Help

SVG Charts

SVG (Scalable Vector Graphics) charts help you visualize data in custom charts (maps) in SVG formats. SVG charts offer several advantages, including the ability to scale without losing quality and wide support across modern web browsers. When visualizing data using an SVG chart, it is essential to be aware of the SVG image path name. You can access the SVG image path name by opening the image in Notepad, Notepad++, or Visual Studio code.

Use the <path> element to define different regions or shapes in your SVG chart. Each path can represent a distinct data point or region, such as a state in a geographical map.

The title attribute ensures that users can see the name or description of the path when they hover over it. This is particularly useful for providing additional context or information about the data point represented by the path.

The id attribute allows you to bind data to specific paths. You can use CSS to style the paths based on data values or JavaScript to add interactivity, such as highlighting a region or displaying a tooltip with detailed information.

Basic Configuration

Add and configure the SVG chart in Infoveave with the simple drag-and-drop option. Select the Datasource, the associated measure and the dimensions required. Below are the simple steps on how to configure a SVG chart in Infoveave.

  1. Drag the SVG chart and drop it onto the designer workspace, from the chart library.
  2. Click on the SVG chart in the designer to select it.
  3. With the SVG chart selected, go to the Configuration tab located in the Configuration panel.
  4. Under the Configuration tab, select the Basic Configuration option to access the essential settings for the scatter chart.
  5. Select the Datasource from Source which the chart will pull the data from the option.
  6. Choose the Measure(s) that represents the numerical values you want to display on the SVG chart.
  7. Choose the Dimension(s) that represents the categorical values you want to display on the SVG chart.
  8. Use the Date (optional) to include a date dimension in your chart, useful for showing trends over time. SVG Chart
  9. Enable Hide Zero Values option (optional) to hide bars that have a value of zero.

Chart Customization

SVG chart

Customizing the SVG chart allows you to tailor the widget appearance to meet your theme. With improved customization you can enhance the clarity on the data points, the chart aesthetics and set interactivity filters making your dashboard visually appealing also effectively communicating your data insights.

The basic customizations available for the SVG chart are as below

  • General Modify the chart’s general appearance, including the background color, borders, shadows, and drill-out choices.
  • Title Enable and customize the chart title’s text, font, color, and alignment.
  • Heatmap Adjust the heatmap visibility, position, text, and orientation settings.
  • Position Set the vertical and horizontal position of the chart within the available chart area to present the chart in the best way.
  • Series Customize the look and behavior of the data series, such as labels, colors, and backdrop.
  • Tooltip Customize the tooltip settings to improve the information shown when you hover over data points.
  • Others Additional options to select the SVG image and set the name property and size.