Datapicta logo
Combining Elements in Charts

In this tutorial we will use several elements in a very basic form. We will use the same data for all elements. Below an example of a chart containing the elements Area, Dot, Line, and Text combined.

Introducing the data

We will use the following data throughout this tutorial:

name,value,date
a,1,2025-01-01  
b,2,2025-02-01
c,3,2025-03-01
d,2,2025-04-01
e,3,2025-05-01
f,4,2025-06-01

The above data is presented in CSV format (comma separated values) and can easily be copied into the DataPicta app.

  • Copy the data above to your clipboard
  • Goto www.datapicta.com
  • Click Data
  • Paste the data in the text area
  • Enter a name for the dataset, for example Basic Data
  • Click Parse

You now see the data presented in a table. In the date field you see dates presented as strings, this means that the app will handle these values as just text and not real dates. You should convert these text values to dates.

  • Click Parse field
  • At the Date row click Date...

Here you can format how the text presents the data, but by default this is YYYY-MM-DD which is the same as the format of the text. So you can just click OK.

The LINE element

  • Click Elements
  • Click Line in the presented dialog
  • For X-axis choose date
  • For Y-axis choose value
  • For Stroke color choose name
  • Click the Style tab
  • For Stroke width choose 3 pixels

The DOT element

  • Click Elements
  • Click Dot in the presented dialog
  • For X-axis choose date
  • For Y-axis choose value
  • Click the Style tab
  • For Radius choose 6 pixels
  • For Fill color choose a dark color
  • For Stroke color choose a light color
  • For Stroke width choose 3 pixels

The AREA element

  • Click Elements
  • Click Area in the presented dialog
  • For X-axis choose date
  • For Y-axis choose value
  • Click the Style tab
  • For Fill color choose an even lighter color

You now see three elements in the chart. The area element is drawn on top of the line and dot elements, which does not look very nice. Now collapse the panel and play with the arrows to move the elements up and down, you want to have the dot element to be drawn last so it is on top of the area element.

The TEXT element

  • Click Elements
  • Click Text in the presented dialog
  • For X-axis choose date
  • For Y-axis choose value
  • For Text choose name

The names appear on the chart, but they are not very readable.

  • Click the Style tab
  • For Font size choose 16 pixels
  • Scroll down to Offset
  • For Horizontal offset choose 16 pixels

And now you know how to combine elements in a chart. This is the basic principle of the Grammar of Graphics, a core concept of the DataPicta app.