Chart colours

27335

Is there a way to define the colours used in the Data Visualisation panel Stacked Bar chart (or any chart for that matter)?

The Theme's are handy but it would be great to define my own colour range to suit my client's needs.

Thank you in advance

  • Hi Nick Fernley,

    I replied a while back to another post about changing palettes.

    This is the documentation of the Charting tool Collaborate uses, that will give you much more detail about the customisation options available.

    Andrew

  • Hi Andrew Quinn , and thank you for your response. Even though I have System Administration privileges for my client's site I don't have permissions to access and view that post.

    My thanks

  • You'll need to ask for access to the HighQ Client Community site (as well as this one, the Developer Community).

    Here is a copy of that reply.......................................:

    Until HighQ offer this natively you can achieve this now, as a stop-gap, by adding a content editor panel, and pasting the below Javascript via the source button.

    You can define the (HTML) colours in the palette that suits your branding.

    <script type="text/javascript">
    
    // This is the custom palette to apply to your charts
    var myCustomPalette = "#c23531,#2f4554,#61a0a8,#d48265,#91c7ae,#749f83,#ca8622,#bda29a,#6e7074,#546570,#c4ccd3";
    
    $j(function() {
    	FusionCharts.addEventListener("initialized", function(opts) {
    	    FusionCharts.items[opts.sender.id
    "paletteColors", myCustomPalette); }); }); </script>

    So as an example we have the following demonstration charts (using the zune theme):

    https://collaborate-community-public.s3-ap-southeast-2.amazonaws.com/examples/chart1.png

    And then after using the above Javascript with the following palette:

    https://collaborate-community-public.s3-ap-southeast-2.amazonaws.com/examples/chart-palette.png

    The chart then changes to:

    https://collaborate-community-public.s3-ap-southeast-2.amazonaws.com/examples/chart2.png

    ]]>