• Replies 4 replies
  • Subscribers 0 subscribers
  • Views 36 views
  • Users 0 members are here
Options
3sides - Social sharing widget
Related

Chart colours

Nick Fernley
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

Parents

  • 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

    ]]>
Reply

  • 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

    ]]>
Children
No Data