Creating Charts via Drag & Drop in the Desktop Designer
Tags: webdev, tutorial, reporting, productivity
Published: 2022-01-18 13:47:04

**tl;dr List & Label is a reporting component for software developers and improved the Drag & Drop support for charts in the desktop designer. Check out the example below to see how it works.** 

[List & Label’s](https://www.combit.com/) chart dialog offers a load of possible customizations. However, as always, with great power comes great complexity. Even creating a simple pie chart could have taken some time if you’re not yet familiar with List & Label’s chart features. As you can already easily create crosstabs via Drag & Drop, and we just recently improved the table’s drag & drop features, offering a thorough D&D support for charts was the next logical step on our path to a simpler, more intuitive end user desktop designer.

For a quick walkthrough, let’s start with a simple pie chart in our demo application – the distribution of customers by country. Simply drag the Customers.Country field to the workspace and drop it there.

![drag and drop field](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1lojgmwhqr6l3txz9cn.png)

This brings up the following choices:

![chart dialogue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/elaxtx122i9av6lhzkck.png)

Note the last entry, which is new to List & Label 27. In the next step, you choose the chart type directly in the workspace:

![choose chart type](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bi2j1owbpamz1dcvgbn2.png)

As we’re happy with the default for this case – that’s all. The preview shows the result:

![chart result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqal5ktgohtrk5orrfk0.png)

As a more complicated example, let’s compare the sales for the different regions EMEA, NAFTA and APAC through the years. To create this, just drag Sales.Year and drop it on the workspace. Choose “Bar” and “Clustered”. As we already have aggregated values in the EMEA, NAFA and APAC fields of the database, we want to create the values by series. So let’s choose this.

Now, simply create the series by dropping the APAC, EMEA and NAFTA fields into the designated area. After that, here’s what the workspace looks like:

![bar chart workspace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0j81ggm4vnd53ajuuwo.png)

Of course, you still need to tweak sometimes – as for example, the years have two digits here, as they aren’t integer fields in the database. Of course, the dialog with all its properties is always still available to the rescue. Simply double-click the chart to bring up the dialog. Take note of the new, (hopefully) helpful tooltip while you’re there:

![tool tip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ajgra19umiy8jeqd6u5e.png)

We’ve added these to a number of places to highlight often overlooked features. You can immediately apply this new knowledge and click on one of the year labels in the dialog’s preview, in order to get to the coordinate value and edit its format property:

![edit format](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvo94ojcwgflf4s89h4g.png)

Which (after doing the same tweak for the y-Axis) results in:

![bar chart result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgdexrqfjtqtbezf70a1.png)

We’re pretty sure this new feature makes the creation of your charts much easier and intuitive.

Visit our [Reporting Blog](https://www.combit.blog/en/) to find out more about topics that keep us busy. If your German is not completely lost, you can also visit the [Reporting Blog](https://www.combit.blog/de/) in this language.