Menu
SharePoint jQuery Charts

Advanced Chart Options

Advanced chart options allow flexible adjustment of chart properties.

Since we use Highcharts rendering engine for charts editing, advanced charts options are recommended for users who are familiar with Highcharts component.

Parameters of function “ApplyAdvancesSettings” (without “vhc_” prefix) correspond to the same parameters of Highcharts (http://www.highcharts.com/ref/). The common approach for modifying Highcharts options is the following:

  1. Make sure that parameter exists. If it does not, create it.

if(!vhc_plotOptions) vhc_plotOptions = new Object();

if(!vhc_plotOptions.column) vhc_plotOptions.column = new Object();

if(!vhc_plotOptions.column.dataLabels) vhc_plotOptions.column.dataLabels = new Object();

  1. Assign required parameter in “Avanced options” block. Click “Edit advanced settings” and enter text of parameters.

vhc_plotOptions.column.dataLabels.color =”#FF0000”;

For example:

1) Adding gradient to background.

if(!vhc_chart) vhc_chart = new Object();

vhc_chart.backgroundColor = { linearGradient: [0, 0, 500, 500], stops: [[0, 'rgb(255, 255, 255)'],[1, 'rgb(200, 200, 255)']]};

2) Changing data labels color.

if(!vhc_plotOptions) vhc_plotOptions = new Object();

if(!vhc_plotOptions.column) vhc_plotOptions.column = new Object();

if(!vhc_plotOptions.column.dataLabels) vhc_plotOptions.column.dataLabels = new Object();

vhc_plotOptions.column.dataLabels.color = "#ff0000";