TreeMap chart not showing colors

Vaadin 6 / 7 / 8
1

Hello, for some reason my implementation of the treemap chart does not show any colors in the squares. Below is my code. Please help:

Chart chart = new Chart(ChartType.TREEMAP);
chart.setSizeFull();

Configuration conf = chart.getConfiguration();
conf.setTitle("");

ColorAxis colorAxis = new ColorAxis();
colorAxis.setMinColor(new SolidColor("#FF0000"));
colorAxis.setMaxColor(new SolidColor("#068009"));
chart.getConfiguration().addColorAxis(colorAxis);

List<Object> resultList = ....Get Data...

TreeSeries dataSeries = new TreeSeries();

List<TreeSeriesItem> dataList = new ArrayList<>();

for(Object data : resultList) {
    TreeSeriesItem item = new TreeSeriesItem(data[0]
.toString(), Integer.parseInt(data[1]
.toString()));
    item.setColorValue(Integer.parseInt(data[1]
.toString()));
    dataList.add(item);
}

dataSeries.setData(dataList);

PlotOptionsTreemap plotOptions = new PlotOptionsTreemap();
plotOptions.setLayoutAlgorithm(TreeMapLayoutAlgorithm.SQUARIFIED);
dataSeries.setPlotOptions(plotOptions);

chart.getConfiguration().setSeries(dataSeries);
chart.drawChart(chart.getConfiguration());
2

What version of Vaadin Charts are you using?

The code looks ok, what kind of values are you setting in TreeSeriesItem color value?

Something that could help checking what’s going on is the json that defines the chart, you can print it in the console with:

        System.out.println(ChartSerialization.toJSON(chart.getConfiguration()));

Could you try it and add the result in the answer?

3

Hi, I’m using version 3.2.0. Below is the result:

    "chart": {
        "type": "treemap"
    },
    "title": {
        "text": ""
    },
    "colorAxis": {
        "axisIndex": 0,
        "maxColor": "#068009",
        "minColor": "#FF0000"
    },
    "plotOptions": {
        
    },
    "series": [{
        "layoutAlgorithm": "squarified",
        "data": [{
            "name": "ABC1",
            "value": 92,
            "colorValue": 92
        },
        {
            "name": "ABC2",
            "value": 93,
            "colorValue": 93
        },
        {
            "name": "ABC3",
            "value": 0,
            "colorValue": 0
        },
        {
            "name": "ABC4",
            "value": 0,
            "colorValue": 0
        },
        {
            "name": "ABC5",
            "value": 92,
            "colorValue": 92
        },
        {
            "name": "ABC6",
            "value": 0,
            "colorValue": 0
        },
        {
            "name": "ABC7",
            "value": 0,
            "colorValue": 0
        },
        {
            "name": "CPSI",
            "value": 0,
            "colorValue": 0
        },
        {
            "name": "ABC8",
            "value": 14,
            "colorValue": 14
        },
        {
            "name": "ABC9",
            "value": 0,
            "colorValue": 0
        },
        {
            "name": "ABC10",
            "value": 66,
            "colorValue": 66
        },
        {
            "name": "ABC11",
            "value": 87,
            "colorValue": 87
        },
        {
            "name": "ABC12",
            "value": 96,
            "colorValue": 96
        },
        {
            "name": "ABC13",
            "value": 0,
            "colorValue": 0
        },
        {
            "name": "ABC14",
            "value": 88,
            "colorValue": 88
        },
        {
            "name": "ABC15",
            "value": 100,
            "colorValue": 100
        },
        {
            "name": "ABC16",
            "value": 72,
            "colorValue": 72
        },
        {
            "name": "ABC17",
            "value": 41,
            "colorValue": 41
        },
        {
            "name": "ABC18",
            "value": 100,
            "colorValue": 100
        },
        {
            "name": "ABC19",
            "value": 100,
            "colorValue": 100
        },
        {
            "name": "ABC20",
            "value": 0,
            "colorValue": 0
        },
        {
            "name": "ABC21",
            "value": 100,
            "colorValue": 100
        },
        {
            "name": "ABC22",
            "value": 0,
            "colorValue": 0
        },
        {
            "name": "ABC23",
            "value": 52,
            "colorValue": 52
        }],
        "type": "treemap"
    }],
    "exporting": {
        "enabled": false
    }
}
4

If I plug that data into jsfiddle for the highcharts treemap demo, it works fine…

5

I was able to reproduce it using jsfiddle with a fixed version http://jsfiddle.net/alvarezg/a9u3pozd/

It looks like it’s a problem with Highcharts version, I tried and it works correctly in Vaadin Charts 3.1 but fails in 3.2. Can you create a ticket in
https://github.com/vaadin/charts
 for it?

As a workaround you can use Vaadin Charts 3.1.

6

Also removing the data series items that have 0 as value seems to fix the coloring issue

http://jsfiddle.net/alvarezg/Lqp6j9ha/