Jasper report color issue with Highcharts's plotOptions.fillColor

Question

I'm developing a report in Jaspersoft Studio 6.4 using custom visualization component and Highcharts.

Long story short, when doing a bubble chart or an area chart, plotOptions.fillColor -attribute does not work properly, but leaves the bubbles inside or stacked area chart's insides black. Black color usually means the color is not found, but the line of the bubble/lines in the area chart work as they should.

Here is the following Highcharts script for area chart:

define(['jquery_hc','hchart'], function ($, Highcharts) {

	return function (instanceData) {	

	// Creating the chart
	var config = {

    chart: {
    	type: 'area',
    	plotBorderWidth: 1,
        renderTo: instanceData.id,
        width: instanceData.width,
		height: instanceData.height,
		marginBottom: 15,
		marginLeft: 40,
		marginRight: 5,
		marginTop: 5
    },
    title: {
    	text: ""
    },
    colors: ['#927453', '#9b672c', '#b0771e', '#e66726', '#474747', '#949494', '#feb40b', '#bd9c31', '#e0b33a'],
    xAxis: {
        allowDecimals: false,
        title: {enabled: false},
        labels: {enabled: false},
        visible: false
    },
	  legend: {
	  	itemStyle: {"fontSize": 6},
	  	symbolPadding: 4,
	  	symbolHeight: 4,
        symbolWidth: 4,
        y: 20
	  },
      credits: {enabled: false},
	yAxis: {
		title: {enabled: false},
        labels: {
        	style: {"fontSize": 6},
        	formatter: function () {
         	   return this.value;
           	},
        },
        tickInterval: 2
    },
    plotOptions: {
        area: {
            stacking: 'percent',
        	animation: false,
        	marker: {
        		enabled: false
        	},
        	lineWidth: 1
        }
    },
    series: [{
        name: 'that',
        data: [502, 635, 809, 947, 1402, 3634, 5268]
    }, {
        name: 'it',
        data: [106, 107, 111, 133, 221, 767, 1766]
    }, {
        name: 'with',
        data: [163, 203, 276, 408, 547, 729, 628]
    }, {
        name: 'who',
        data: [18, 31, 54, 156, 339, 818, 1201]
    }, {
        name: 'how',
        data: [2, 2, 2, 6, 13, 30, 46]
    }, {
        name: 'this',
        data: [82, 72, 62, 46, 113, 320, 443]
    }, {
        name: 'that',
        data: [11, 12, 14, 16, 13, 55, 113]
    }, {
        name: 'those',
        data: [7, 1, 3, 11, 15, 37, 49]
    }, {
        name: 'these',
        data: [108, 301, 504, 1056, 3039, 8018, 10201]
    }, {
        name: 'this too',
        data: [10, 30, 50, 105, 303, 801, 1020]
    }]
}

new Highcharts.Chart(config);
	 
	}
});

And the build.js:

({
    baseUrl: '',
    paths: {
        jquery_hc: "../jquery-3.2.1",
        hchart: "../highcharts",
        'areaChart': 'areaChart'
    },
    shim: {
    	'hchart' : {
    		deps: ["jquery_hc"],
    		exports: 'Highcharts'
    	}
    },
    name: 'areaChart',
    out: "areaChart.min.js"
})

The highchart is using newest highchart.js and jquery-3.2.1.js.

Few things I've tried to add the color:

1. Using theme to put the charts main color
2. Setting plotOptions.fillColor: null
3. Setting plotOptions.fillColor: '#927453'
4. Setting plotOptions to "series" from "area"
5. Setting plotOptions.color: [the same colors]

and maybe few other things based on the API reference from Highcharts.

One thing on the other hand is working, if I put the plotOptions.fillColor: '#ffffff', the color of all changes, which means the issue is mostly about matching one color per dataset.

One huge issue is, that this is not reproducible in JSFiddle (JSFiddle).

So, Jasper Report is possibly to blame, but I'm starting to be out of ideas. I've found one issue, which could be related to this: (https://
community.jaspersoft.com/jaspersoft-studio/issues/8641) , but I haven't been able to do much about it with this setup. My web application is using jasper engine to produce reports and the problem is also present in there.

People of StackOverflow, employees of Highcharts and employees of Jaspersoft, combine your knowledge and help me to solve this issue!

Lastly, a picture of the Jasper Report studio of the generated report:

Answer 1

After looking to code, I found report is properly working when we see it in HTML format but pdf format is not working properly. As we kow CVC component utilises phantmjs in order to download report then I tried to search issue related to phantomjs and highcharts but unable to find anything.

Then I tried looked plotOption property and added following plotOption to your code.

plotOptions: {
   series: {
        animation: false,
        stacking: 'percent',
        lineWidth: 1,
        fillColor: null,
        fillOpacity: 1, // this is default to 0.75 
        marker: {
           enabled: false
        }
    }
},

Then it starts showing the result in PDF format as well. So the main culprit is fillOpacity If you set it to 1 then your problem will be resolved.

Note: If you use fillOpacity other than 1 then it is not showing result.

You can also specify color, fillcolor and opacity as shown below.

series: [{
        name: 'that',
        data: [502, 635, 809, 947, 1402, 3634, 5268],
        fillColor:'red', // use this color light as compared to color
        fillOpacity: 1,
        color: 'white'   // use this color dark as compared to fillcolor
    },
    ...
    ...
    ...
    ,{
        name: 'this too',
        data: [10, 30, 50, 105, 303, 801, 1020],
        fillColor:'#00ff00',
        fillOpacity: 1,
        color: 'orange'
    }]

You can download code from here.