In order to ensure the greatest flexibility, xCharts includes functionality to create chart layouts that fit your needs regarding general aspect of the chart, axis labeling, etc.

The Manage Chart Layouts screen lists all available chart layouts, providing the following information:



The name of the layout
AuthorThe creator of the layout
ScopeWhich type of resource was used
Chart data scriptsList of all scripts that are using this resource
CreatedThe timestamp of layout creation
UpdatedThe timestamp of the last update

Available operations for each script

  • Edit
  • Delete
  • Copy

In order to get to the Edit layout screen, click on the Create a new Layout button or Edit an existing layout.

Editing a Chart Layout Script


It is now possible to navigate between the single sections via tabs. Furthermore, it is possible to load scripts (*.js and *.css files) from the JIRA_HOME directory.

In order to select your scripts in the drop-down, those files have to be placed within the folder xcharts in your JIRA_HOME → JIRA_HOME/xcharts/

You will need to manually create this folder once in your instance, granting permissions to the user running your Jira application.


In the General section you can edit the Name and the Description of your template.


Resources are Javascript and CSS files that can be used in layouts. The most common scenario for such a resource would be some corporate CSS that should be included in multiple charts, or an external Javascript library.

Creating resources is pretty straight forward, by navigating to the Resources page and then clicking the Create resource button.
After creating a resource, it is possible to choose this resource in the Javascript layout, by checking the corresponding resource checkbox.


The Layout section is where your actual layout code goes. For further styling options see the C3.js Reference.

General Structure
  data: chartData,
  /* Your template script goes here */

Highlight ChartData


Since version 1.5.0 it is possible to display the chart data in Json format under the scripted chart.

By typing 


in the JavaScript layout script, the chart data will be displayed.

(info) This method is only for developing purposes. This code snippet has to be removed from the layout script when using the chart. Otherwise the chart data will always be displayed - also in xCharts Gadgets.

This method will simplify the usage and the workflow within charts.


CSS file that will be used in the chart. Use the Resources functionality if you want a common CSS file for multiple charts.

Click Save in order to save or update your script. Click Cancel to get back to the Chart Layout Scripts screen.

On this page