Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


To style any chart, login to Zoola Analytics and open any existing chart-based Ad Hoc View and click the properties icon and choose "Chart Format..."  This will open the Chart Format dialog and you can click the "Style" tab and enter the following properties.

Chart FormatImage Modified

Bar and Column Charts

Example

Properties

Property

Value

colors

["#b6d399", "#f6dede", "#e3d8ca", "#ffe0bd", "#a2cbc3", "#f4f4f4", "#6897bb", "#a2cbc3", "#672edf", "#35465e", "#af5166", "#ffd296", "#d0ffc7"]

series.colorByPoint

false

series.borderWidth

2

series.borderColor

#c2c2c2

series.borderRadius

10

plotOptions.series.dataLabels.enabled

true

legend.align

right

legend.backgroundColor

#FFFFFF

legend.borderColor

#FFFFFF

legend.verticalAlign

middle

xAxis.labels.enabled

false

yAxis.labels.enabled

false

legend.itemStyle

{"color": "#333333", "cursor": "pointer", "fontSize": "11px", "fontWeight": "normal", "textOverflow": "ellipsis"}

plotOptions.column.dataLabels.style.fontSize

11px

plotOptions.series.dataLabels.style.fontWeight

normal

xAxis.gridLineColor

transparent

yAxis.gridLineColor

transparent

chart.style.fontFamily

Helvetica, Verdana, Arial, Georgia, sans-serif

xAxis.lineColor

#c2c2c2

legend.itemMarginBottom

2

legend.itemMarginTop

2

Scatter Charts

Example

Scatter Chart

Properties

Property

Value

legend.layout

vertical

legend.align

left

legend.verticalAlign

top

legend.floating

true

plotOptions.scatter.marker.radius

5

plotOptions.scatter.marker.symbol

diamond

plotOptions.scatter.marker.states.hover.fillColor

#C2C2C2

plotOptions.scatter.marker.states.hover.lineColor

#000000

plotOptions.scatter.marker.fillColor

#a1f78f

plotOptions.scatter.marker.lineColor

#bbbcfc

plotOptions.scatter.marker.lineWidth

2px

xAxis.gridLineColor

transparent

yAxis.gridLineColor

transparent

chart.style.fontFamily

Helvetica, Verdana, Arial, Georgia, sans-serif

chart.spacingBottom

30

For Pie Charts

Example

Pie Chart

Properties

Property

Value

colors

["#b6d399", "#f6dede", "#e3d8ca", "#ffe0bd", "#a2cbc3", "#f4f4f4", "#6897bb", "#a2cbc3", "#672edf", "#35465e", "#af5166", "#ffd296", "#d0ffc7"]

series.dataLabels.enabled

true

legend.align

right

legend.backgroundColor

#FFFFFF

legend.borderColor

#FFFFFF

legend.verticalAlign

middle

legend.itemStyle

{"color": "#333333", "cursor": "pointer", "fontSize": "11px", "fontWeight": "normal", "textOverflow": "ellipsis"}

chart.style.fontFamily

Helvetica, Verdana, Arial, Georgia, sans-serif

series.dataLabels.connectorColor

#0000FF

series.dataLabels.distance

30

series.dataLabels.format

{y}

chart.style.fontSize

16px

series.dataLabels.style

{"color": "contrast", "fontSize": "14px", "fontWeight": "bold", "textOutline": "1px contrast" }


For Line and Area Charts

Example

Area Chart

Properties

Property

Value

colors

["#b6d399", "#f6dede", "#e3d8ca", "#ffe0bd", "#a2cbc3", "#f4f4f4", "#6897bb", "#a2cbc3", "#672edf", "#35465e", "#af5166", "#ffd296", "#d0ffc7"]

plotOptions.area.marker.symbol

diamond

plotOptions.area.marker.fillColor

#FFFFFF

plotOptions.area.marker.lineColor

#5546db

plotOptions.area.marker.lineWidth

2px

plotOptions.area.marker.radius

5

chart.style.fontFamily

Helvetica, Verdana, Arial, Georgia, sans-serif

series.dataLabels.enabled

true

series.dataLabels.style

{"color": "contrast", "fontSize": "14px", "fontWeight": "bold", "textOutline": "1px contrast" }

series.dataLabels.padding

20

xAxis.labels.rotation

0

yAxis.gridLineColor

transparent

xAxis.gridLineColor

#FFFFFF

xAxis.gridLineWidth

2px

xAxis.gridZIndex

4