In DataPicta, you typically first add 'Data' and then visualize that data one or more 'Pictas'. Hence the name DataPicta! A 'Picta' is a chart type, we currently support the following pictas:
- Line chart
- Bar chart
- Pie chart
- Scatter plot
- Radar chart
- Tree
- Treemap
- Sunburst
- Candlestick chart
- Heatmap
- Sankey diagram
- Funnel chart
- Gauge chart
- Streamgraph
- Choropleth map
- Bubble map
More are planned for the future! In the menu on the left you will find lots of examples for each picta type.
You should always start by adding data to your chart, please refer to the Data documentation for more information on how to add and manage data in DataPicta.
Add picta
After adding data you can add pictas to visualize that data. Simply click on the 'Add picta' button in the chart editor sidebar. A dialog will open where you can choose the picta type you want to add. After selecting a picta type, a new picta panel will be added to the sidebar, and the picta will be added to the chart canvas.
DataPicta will automatically try to map data fields to the picta settings. For instance, in a bar chart the first field in the data is mapped to the horizontal axis (x-axis), and the second field to the vertical axis (y-axis). For this to work, data fields need to have the correct type, in case of the bar chart the first field should be text, and the second field should be number. If DataPicta cannot automatically map data fields to picta settings, a warning dialog will open, explaining what is missing. You can manually override the data field mappings in the 'encode' section or by re-ordering the data fields.
Mostly the default mappings will work fine, meaning you will see your data visualized right away. You can then further customize the picta settings in the added picta panel in the sidebar.
Depending on the picta type you have added, different settings will be available in the picta panel in the sidebar. This documentation will cover all settings, but not all settings are available for all pictas. For instance, 'bar charts' can have rounded corners, while 'line charts' cannot. There are a lot of properties you can set for each picta, some properties are directly available in the picta panel, while others are grouped in sections you need to enable to add them to your picta.
Main settings
ID and name
The ID and name settings allow you to identify and label your picta. The ID is a unique identifier used internally, while the name is the display label that appears in the legend and tooltips.
Dataset
The dataset setting specifies which data source the picta should use. If you have multiple datasets in your chart, you can select which one to visualize with this picta.
Smooth
The smooth setting is used in line charts to create smooth, curved lines instead of straight segments between data points. This can make the chart more visually appealing and easier to read when showing trends.
Step
The step setting creates a stepped line chart where the line moves horizontally then vertically (or vice versa) to connect data points, rather than diagonally. This is useful for displaying data that changes at specific intervals.
Orient
The orient setting controls the orientation of the chart. For example, in bar charts you can switch between vertical bars (default) and horizontal bars. This setting determines whether the chart reads left-to-right or bottom-to-top.
Min and max
The min and max settings allow you to define the minimum and maximum values for the chart's scale. This can be useful for focusing on a specific range of data or maintaining consistent scales across multiple charts.
Edge shape
The edge shape setting is used in Sankey diagrams to control the appearance of the connecting links between nodes. You can choose between curved and straight edges to match your design preferences.
Split number
The split number setting determines how many segments or divisions are created in certain chart types. For example, in gauge charts, this controls how many tick marks appear on the gauge scale.
Layout
The layout setting controls the arrangement and positioning algorithm used in certain chart types like tree, treemap, and graph charts. You can choose between different layout algorithms to optimize the visual presentation of hierarchical or network data.
X axis index
The X axis index setting allows you to specify which X axis the picta should use. This is useful when you have multiple X axes in your chart and want different pictas to reference different axes.
Y axis index
The Y axis index setting allows you to specify which Y axis the picta should use. Similar to X axis index, this enables you to work with multiple Y axes and assign different pictas to different axes.
Polar index
The polar index setting is used in polar coordinate systems to specify which polar coordinate system the picta should reference. This is relevant for radar charts and other polar-based visualizations.
Radius
The radius setting controls the size of circular or radial chart elements. For pie charts, this defines the outer radius of the pie. You can set it as a percentage of the canvas size or as an absolute value.
Center
The center setting defines the position of the center point for circular charts like pie charts, sunburst charts, and gauge charts. You can specify the horizontal and vertical position as percentages or pixel values.
Leaf depth
The leaf depth setting is used in hierarchical charts like treemaps and sunburst charts to control how many levels of the hierarchy are displayed. This allows you to limit the depth of the visualization for better clarity.
Start and end angle
The start and end angle settings control the angular range of circular charts. For pie charts, you can use these to create partial circles or adjust the starting position of the first slice.
Pad angle
The pad angle setting adds spacing between segments in circular charts like pie charts and sunburst charts. This creates visual separation between slices, making each segment more distinct.
Coordinate system
The coordinate system setting determines which coordinate system the picta uses. Options include Cartesian (standard x-y grid), polar (circular), and geographic (for map-based visualizations).
Stack
The stack setting allows you to stack multiple series on top of each other in bar charts, area charts, and line charts. This is useful for showing the composition of totals and how different components contribute to the whole.
Rose type
The rose type setting is specific to pie charts and controls whether the chart displays as a standard pie or as a rose/nightingale chart, where the radius of each sector represents the data value rather than just the angle.
Bar width
The bar width setting controls the width of bars in bar charts. You can set this as a percentage of the available space or as an absolute pixel value to achieve the desired visual weight.
Bar gap
The bar gap setting controls the spacing between bars in bar charts. When displaying multiple series, this setting determines how much space appears between the bars of different categories.
Symbol
The symbol setting allows you to choose the shape of markers used in line charts and scatter plots. Options include circle, rectangle, triangle, diamond, and custom shapes to visually distinguish different data series.
Symbol size
The symbol size setting controls the size of markers in line charts and scatter plots. You can set a fixed size for all symbols or map the size to a data dimension for bubble chart effects.
Checkboxes
Expand and collapse
The expand and collapse checkbox is available in tree and hierarchical charts, allowing nodes to be expanded or collapsed to show or hide child elements. This helps manage complex hierarchies.
Round cap
The round cap checkbox controls whether line ends in line charts and progress bars have rounded caps instead of flat ends. This creates a softer, more polished appearance.
Avoid label overlap
The avoid label overlap checkbox automatically adjusts label positioning to prevent labels from overlapping each other. This improves readability when space is limited.
Show background
The show background checkbox controls whether a background is displayed behind bars or other chart elements. This can add depth and help distinguish foreground elements.
Show symbol
The show symbol checkbox determines whether markers/symbols are displayed at data points in line charts. Disabling this creates a cleaner line without point markers.
Sections
End label
The end label section allows you to configure labels that appear at the end of lines or bars in your chart. This is useful for displaying final values or totals without cluttering the main chart area.
Encode
The encode section is where you map your data fields to visual properties of the picta. For example, you specify which data column represents the x-axis, y-axis, colors, sizes, or other dimensions of the visualization.
Tooltip
The tooltip section controls the appearance and behavior of tooltips that appear when hovering over chart elements. You can customize the content, formatting, and trigger behavior of tooltips.
Emphasis
The emphasis section defines how chart elements appear when they are highlighted or hovered over. You can configure special colors, sizes, borders, and other styling for the emphasized state.
Axis tick
The axis tick section controls the appearance of tick marks on the chart axes. You can customize the length, width, and style of ticks to match your chart design.
Progress
The progress section is used in gauge charts and progress-type visualizations to configure the appearance of the progress indicator, including colors, widths, and animation effects.
Line style
The line style section allows you to customize the appearance of lines in line charts and borders. You can set properties like color, width, dash pattern (solid, dashed, dotted), and opacity.
Item style
The item style section controls the appearance of individual chart elements like bars, pie slices, or data points. You can customize colors, borders, shadows, and opacity for these elements.
Background style
The background style section allows you to customize the appearance of background elements in your chart. You can set colors, borders, and other visual properties for the background of bars and other chart components.
Label
The label setting allows you to customize the text displayed on the chart. You can set the font size, color, and style to enhance readability and match your design preferences.
Upper label
The upper label option is used to display additional information above the main label. This can be useful for showing supplementary data or context related to the chart.
Leaves
The leaves setting is relevant for tree and treemap charts, allowing you to define how the leaf nodes are displayed. You can customize their appearance to improve the visual hierarchy of the data.
Area style
The area style option allows you to customize the appearance of the area in area charts. You can set properties like color, opacity, and border to enhance the visual representation of the data.
Mark point
The mark point setting allows you to highlight specific data points on the chart. You can customize the appearance of these points to draw attention to important values or events.
Mark line
The mark line option is used to draw lines across the chart to indicate thresholds or important values. This can help users quickly identify key data points.
Label line
The label line setting allows you to customize the lines connecting labels to their corresponding data points. This is useful for improving the clarity of the chart and ensuring that labels are easily associated with the correct data.
Arrays
Levels
The levels array allows you to define different visual styling for different levels in hierarchical charts like treemaps and sunburst charts. Each level can have its own colors, borders, and label styles.