Advanced Chart Properties

See also Jedox Chart Palettes

You can change the advanced properties of the chart from Format Chart properties > Advanced. This tab allows you to show the JSON object that is the basis of your chart. JSON is a formal notation which describes as text the properties of your chart which you specified using the other panels in the Chart properties dialog. You can modify this JSON object to change or add features to the chart that are not supported by the native UI. The JSON objects are based on highcharts API.

Important: only specific properties of an existing chart can be changed or added; you cannot use this functionality to create chart types that are not supported by Jedox. Customized properties are not supported in XLSX snapshots.

The Config tab shows the JSON string of the chart as it is currently configured. You can search, edit, cut, copy and paste text. You can also display a preview of the chart. The JSON properties are case-sensitive.

The Diff tab shows the properties that were changed by modifying the JSON, compared to what is set in the regular chart properties UI.

The JSON code includes syntax checking. Incorrect syntax is marked as an error. If you move the mouse over the error symbol, a tooltip with detailed information is displayed.

The examples below show different ways of customizing a chart using the Advanced properties.

Using a different color for negative values in a column chart

In this chart, the values below 0 are red:

  1. Create a column chart.
  2. In Format Chart Properties > Advanced, add the following property to the series[] object for which you want to enable the negative color: "negativeColor": "#ff0000"
  3. Use a red hex code for the negative values.

Converting a stacked column chart to a bullet chart

  1. Create a Stacked Column Chart.
  2. Change one series (in this case, "Actual") to a regular column and plot it on the secondary axis.
  3. In Format Chart Properties > Advanced, add the following property to "Actual" series[] object:"pointPadding": 0.3 This changes the width of the column.

Customized spacing

You can customize the label positioning by enforcing spacing in the advanced properties. This is useful in cases when the bar reaches the edge of a plot area and the label is displayed incorrectly.

  1. Insert a bar chart.
  2. In Format Chart Properties > Advanced, go to "chart" and add the following property: "spacingRight": 25 . This increases the right side of the plot area.
  3. In plotOptions, add "overflow": "none" and "crop": false to the series. This forces the labels outside of the bars in all of the cases.

Right-To-Left text display

For individual objects in a chart, you can control the display of Right-to-Left text (for example, Hebrew, or Arabic) in a chart, by enabling the following property, e.g., on the labels{} object:

Copy
"useHtml": true

Chart visibility

The visibility of charts can be dynamically changed in the chart properties. This, however, can sometimes conflict with the chart's visibility when defining Advanced chart properties. For example, some chart properties which are enabled via Advanced chart properties may stay visible even when the chart is dynamically hidden.

In these cases, the "visibility" property can be defined on the "style" object of the specific chart property to modify the behavior. For example, adding the code below on the "style" object will make the chart property have the same visibility as the chart itself and also be hidden when the chart is hidden.

Copy
"visibility": "inherit"

Defining minimum / maximum values for the scaling of the value axis

When defining a minimum and maximum value for the scaling of the value axis, the chart may, in some cases, still be plotted with a larger maximum axis value, depending on the size of the chart object. However, the defined minimum and maximum values can be enforced by setting the axis properties "endOnTick" and "startOnTick" to the value false. This is also possible for charts using multiple value axis, as shown in the image.

Formatting tooltips

It is possible to add custom prefixes or suffixes to the tooltips of data points in a chart. To do this define the "pointformat" in the tooltip{} object (in this example, the chart plots data points against the y axis):

Copy
"pointFormat": "${point.y} USD"

This setting would make the numeric value 500 appear as "$500 USD" in the tooltip. It will override the number format from the chart itself; the numeric value would then be shown with the default number of decimals.

However, you can extend the setting with an additional number format, by extending the "point.y" entry:

Copy
"pointFormat": "${point.y:,.0f} USD"

In this example, the comma character denotes that a thousand separator should be set; the character sequence ".0f" defines that zero decimal digits should be shown. The same characters would be used in any locale when defining the Advanced Chart Properties, but would be translated to end user's locale when the chart is displayed.

Updated March 27, 2024