Skip to Content

How to use JSON Options Object Templates with Charts

Vinyl uses Highcharts as the reporting engine for Charting created on application Pages. Defaults are provided for charting look and feel. Using a JSON Template you can define JSON options to replace the options passed to Highcharts when rendering Charts in a Vinyl app to allow for further customization.

Highcharts defines all Chart configuration options they support as well as methods and properties of Highchart objects in their API documentation.

To create your own JSON Template, visit a page in your application other than the Chart you want to modify. Open a web developer utility like Chrome's DevTools or Firefox Devtools and paste the following into the console:

var logging = require("vinyl.logging");
logging.enabled = true;
logging.preserve = true;

Next, navigate to the page that has the chart you want to modify (don't reload the web browser). In your console you'll see the JSON Vinyl produced:

Chart Customers By Country  - using the following chart configuration:

Object { chart: {…}, xAxis: {…}, credits: {…}, title: {…}, plotOptions: {…}, yAxis: (1) […], series: (1) […], tooltip: {…}, exporting: {…}, legend: {} }

Using this output, along with the Highcharts API documentation, identify what specifically you want to modify. Then, navigate to the IDE > Look and Feel > select the Template for the Collection you want to modify > and +Template to create a new template. Specify JSON as the Content Type for the new template. Type your output JSON in the textbox provided.

Lastly, go to your Chart Page > Action Drawer > Design this page and add a new Control. Choose JSON Options Object as the Control Type, and select your JSON template. You can provide parameters if the JSON template used that feature.

Examples of JSON Options

To format a pie with a useful label, use the following. This will output "USA 5%".

{
    "series":[
       {
          "dataLabels": { "format": "{point.name} {point.percentage:.0f}%" }
       }
    ]
}

To set a minimum and maximum y axis value (good for 0 to 100% values) use:

{
             "yAxis": [{
                 "softMin": {{min}},
                 "softMax": {{max}}
             }]
}

To format labels on Funnel chart to appear next to chart without getting cut off:

{
             "plotOptions": [{
                        "funnel": {
                        "dataLabels":{
                            "crop": "false"
                         }
                                }]
}

Important Notes

  • In JSON the parameter name must be a string: "property": 1
  • null is a valid value

Resources

The following Github external link to AnyChart's Chartopedia is a helpful tool when trying to determine which property to modify in a Highcharts JSON object:

https://www.anychart.com/chartopedia/