Early Access: The content on this website is provided for informational purposes only in connection with pre-General Availability Qlik Products.
All content is subject to change and is provided without warranty.
Skip to main content Skip to complementary content

Creating a PixelPerfect chart with user-defined series

You can create a native PixelPerfect chart with manually added series. This method is simpler than using a series template.

Native PixelPerfect stacked bar chart

Example report showing a native PixelPerfect chart, in this case a stacked bar chart with sales and margin calculations for various products

Requirements

Before you start creating a native PixelPerfect chart, you need to have a chart in your Qlik Sense app with a source table that adapts well to what you want to visualize. In the Qlik Sense chart, select the appropriate dimensions and measures to filter the data sufficiently from the app's data model.

The data you use for a native PixelPerfect chart has to be added as a table data binding. To create this type of data binding, use the Database icon with plus symbol Field List menu and add an item under Tables.

Creating a simple PixelPerfect chart

This is the general workflow for creating a native PixelPerfect chart. Parts of it might not apply to every chart available. Each of the charts is different, serving a range of visualization needs ranging from simple to complex. Depending on what you need to visualize, some additional configurations might also be required.

  1. Open the Database icon with plus symbol Field List menu available from the right-side panel in the designer.

  2. Click the plus icon next to Tables.

  3. From the available sheets, select the Qlik Sense chart you want to add as a table. Click the Plus icon next to it.

    The data binding is added.

  4. From the toolbox panel on the right side of the designer, drag a Chart Chart onto the design surface.

  5. Select the blank chart and then open the Gear Properties menu from the right side of the designer.

  6. Under Chart TasksData Member in the menu, select the table you added as a data binding.

  7. Inside the chart, click Run Designer....

  8. In the left panel in the Chart Designer, hover over Series and click the plus icon.

  9. In the menu, select a chart type.

    The Properties for the new series are shown on the right side.

  10. Under Name, add a name for the series. This is recommended, for example, if your chart requires more than one series.

  11. For Argument Data Member, use the drop down menu to select a field containing independent categories that group the data.

    Tip noteIn this context, selecting the Argument Data Member is similar to selecting a dimension in Qlik Sense.
  12. Expand Value Data Members. For Value, select a field containing the variable metrics you want to visualize. For certain advanced chart types (for example, Candle Stick chart), you might need to select more than one Value field.

    Tip noteIn this context, selecting the Value is similar to selecting a measure in Qlik Sense.
  13. If needed, add additional series. In the left panel in the Chart Designer, hover over Series and click the plus icon. Complete the remaining configuration steps as outlined above.

Additional tips for configuring the chart

The above workflow shows you how to create a simple native chart and connect it to Qlik Sense data sources. Here are some extra tips to help you make the most out of native PixelPerfect charts.

Labels and legends

You might need to configure labels and legends so that they appear correctly.

Changing the text

You can change the text shown in the labels and legend. You can do this by entering specific placeholders in the following properties:

  • Labels: Open the Properties for the series, and add a placeholder to Label > Text Pattern.

  • Legend: Open the Properties for the series, and add a placeholder to Legend Text Pattern.

The placeholders instruct PixelPerfect to generate dynamic text with commonly needed values. For example, to use the name of the series, enter {S}. To enter the name of specific field values, enter {A}.

For a full list of placeholders you can use, see Text definition placeholders for native PixelPerfect charts.

Turning labels and legends off

If your chart has a lot of data, it is often preferred to turn labels off (they are turned on by default). To turn off labels in a series, change the Labels Visibility setting in the Properties to False.

To turn the legend off, you need to return to the chart's global Properties in the Chart Designer. In the left-side panel, click Chart. In the Properties menu on the right side, expand Legend and set Visibility to False.

Charts with more than one series

Some native PixelPerfect charts will require you to add more than one series to the chart to visualize all the data. Common examples are grouped or stacked bar charts, stacked line charts, and nested pie charts. You might also need to add multiple series if you want to create a chart that, in Qlik Sense, would require more than one dimension or measure.

For example, to create a stacked bar chart with one independent grouping (Product Group) and two variable metrics (Sales and Margin), you would need to create two series:

  • Sales, with an Argument Data Member of Product Group and a Value of Sales

  • Margin, with an Argument Data Member of Product Group and a Value of Margin

Editing a chart with a user-defined series

Some additional steps are required to edit an existing PixelPerfect chart that is configured with a user-defined series. When you open the Chart Designer, the Properties that are initially shown are the global properties for the chart. To edit the elements that are defined in the visualization, you need to first select the series in the left-side panel.

  1. In the Chart Designer, double-click Series in the left-side panel.

  2. Select the series you want to edit.

  3. Edit the Properties on the right side.

Example - Creating a simple native bar chart

Refer to the example app sources here: Example materials - In-app reporting. Upload the app and data files into a space, and then reload the app. You are ready to complete the example.

In this example, we walk through a simple example of adding a native PixelPerfect bar chart to a report template.

  1. Create a new PixelPerfect template.

  2. Open the Database icon with plus symbol Field List menu available from the right-side panel in the designer.

    Field List menu in the PixelPerfect designer

    The 'Field List' menu expanded from the right side panel in the PixelPerfect designer
  3. Click the plus icon next to Tables.

  4. Expand the Dashboard sheet, and click the Plus icon next to the Sales per Region chart.

    The data binding is added.

  5. From the toolbox panel on the right side of the designer, drag a Chart Chart onto the Detail1 band.

    Blank chart added to template. The image also shows the data source that will be used to bind to the chart.

    Report template with a blank Chart object added, along with the 'Field List' menu expanded on the right side panel showing the data binding we will use to connect to the chart
  6. Select the blank chart and then open the Gear Properties menu from the right side of the designer.

  7. Under Chart TasksData Member in the menu, select the Sales per Region table.

  8. Inside the chart, click Run Designer....

  9. In the left panel in the Chart Designer, hover over Series and click the plus icon. In the menu, select Bar to create a bar chart series.

    The Properties for the new series are shown on the right side.

  10. For Argument Data Member, use the drop down menu to select Region.

    Tip noteIn this context, selecting the Argument Data Member is similar to selecting a dimension in Qlik Sense.
  11. Expand Value Data Members. For Value, select Sales.

  12. In this case, we want to remove the labels and legend. Do both of the following:

    • In the Properties for the series, change the Labels Visibility setting to False.

    • In the Properties for the entire chart (select Chart in the left panel), expand Legend and set Visibility to False.

    Chart Designer with the bar chart series configured to use Qlik Sense data sources

    Chart Designer with placeholder chart at center, and properties used to configure it on the right panel
  13. Add a title to the chart. In the left panel in the Chart Designer, hover over Titles and click the plus icon. Select a title position using the popup menu.

  14. In the Properties for the title, enter Sales By Region for the Text property.

  15. Click OK to exit the Chart Designer.

  16. Increase the size of the chart and the Detail1 band.

  17. In the top right corner, click Save template.

  18. Click Preview report. Download the report and open it.

Chart preview

Generated report showing a chart created by manually adding one data series. In this case, the charts shows a bar chart with sales values for each region

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!