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.
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
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
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
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
Comments
Article is closed for comments.