Jasper report color issue with Highcharts plotOptions.fillColor

Question

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

In short, when creating a bubble chart or area chart, the plotOptions.fillColor attribute does not work properly, but leaves bubbles inside or squared areas inside. Black color usually means that the color is not found, but the line of bubbles / lines in the area chart works as it should.

The following are the top-level script diagrams for the area diagram:

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 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" }) 

Highchart uses the latest highchart.js and jquery-3.2.1.js.

A few things I tried to add to the color:

• Using themes to place the primary colors of charts
• Setting plotOptions.fillColor: null
• Setting plotOptions.fillColor: '# 927453'
• Setting plotOptions for "series" from "area"
• Setting plotOptions.color: [same colors]

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

One thing, on the other hand, works if I put plotOptions.fillColor: '#ffffff', the color of all the changes, which means that the problem is mainly due to matching the same color in the dataset.

One huge problem is that this one does not play in JSFiddle ( JSFiddle ).

So, Jasper's report may be to blame, but I'm starting out with no ideas. I found one problem that may be related to this: (https: //
community.jaspersoft.com/jaspersoft-studio/issues/8641), but I couldn’t do much with this setting. My web application uses the jasper mechanism to create reports, and the problem is also present.

StackOverflow people, Highcharts employees, and Jaspersoft employees combine your knowledge and help solve this problem!

Finally, a Jasper Report studio image of the generated report:

Answer 1

After searching the code, I found that the report works correctly when we see it in HTML format, but the pdf format does not work properly. Since we want the CVC component to use phantmjs to load the report, I tried to find a problem related to phantomjs and highcharts, but could not find anything.

Then I tried to look at the plotOption property and added the 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. So the main culprit is fillOpacity. If you set it to 1, your problem will be solved.

Note. If you use fillOpacity other than 1, then this does not show the result.

You can also specify color, fill, 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 the code here.