In this tutorial, you will create a bar chart with a title and a tooltip.

Open the DataPicta app

• Open the DataPicta app by going to app.datapicta.com (this will open separate browser tab).
• If you never used DataPicta before, you will only see a button for uploading data.
• If you have used DataPicta before, click on 'New blank chart' in the menu in the top right corner.

Upload your data

• Click on the plus icon (+) next to 'Data'.
• You have two options for uploading your data:
  • Upload a file from your computer in CSV or TSV format.
  • Paste or type your data directly into the text area.
• In this example, we will copy and paste the following data:

Country,Visitors
France,100
Spain,94
United States,72.4
Italy,68.5
Turkey,52.6
Mexico,45
Hong Kong,44.5
United Kingdom,41.2
Greece,40.7
Japan,36.9

• After pasting the data, click on 'Add data'.
• Your data should now be visible in the data table.

Create the bar chart

• Click on the plus icon (+) next to 'Picta'.
• Select 'Bar picta' from the list of pictas.

Add a title

• Click on the plus icon (+) next to Canvas, then select 'Title' from the list of canvas elements.
• In the title panel, enter Tourism as the title text.

Add a tooltip

• Click on the plus icon (+) next to Canvas, then select 'Tooltip' from the list of canvas elements.

When you hover over the bars in the chart, a tooltip will appear showing the data values. Lets make it a bit fancier by customizing its appearance.

Customize the tooltip appearance

• Set the trigger to Axis, so the tooltip appears when hovering anywhere along the horizontal axis.
• Enable the Axis Pointer to show a vertical line when hovering.
• Set the type to Shadow, so the area under the axis pointer is highlighted.

Now hover over the chart again to see the updated tooltip

Add a label to the vertical axis

• Open the vertical axis panel
• For Name, enter Million visitors per year
• For Name Location, select Center

Customize the horizontal axis labels

• Open the horizontal axis panel
• Enable the Label option
• For Rotation, enter 45 to rotate the labels by 45 degrees.

Done! You have created a bar chart with a title and a nice tooltip.

Are you ready for more? We have a bonus section for you below.

Bonus: Customize the tooltip content

• In the tooltip panel, find the Formatter input field.
• Enter (or copy-paste) the following formatter string to customize the tooltip content:

item[0].name || ' has ' ||  item[0].value[1] || ' million visitors per year'

What did you just type?

• item[0].name retrieves the name of the data point, which is the country in this case.
• ' has ' is a static string that is added to the tooltip.
• item[0].value[1] retrieves the value of the data point, which is the number of visitors. Note that item[0].value is an array where the first element (index 0) is the category (country) and the second element (index 1) is the value (visitors).
• ' million visitors per year' is another static string added to the tooltip.
• The || operator is used to concatenate (join) strings and values together to form the final message.

Now when you hover over the chart, the tooltip will show a more descriptive message.