No announcement yet.
  • Filter
  • Time
Clear All
new posts

    Changing bar style for multi-series bar chart


    I'm attempting to use a multi-series stacked bar chart to show the task start time and duration similar to a Gantt chart. The chart includes the Start and Duration series as shown below.

    Click image for larger version

Name:	bar_chart.JPG
Views:	93
Size:	18.5 KB
ID:	269090

    Is it possible to make the bar style for the Start series transparent so that I only see the Duration series?


    That's an interesting hack, and we'll check on it, but first just wanted to comment that you can get a rendering like this chart from direct use of the DrawPane very quickly. The core of it is just a loop creating DrawRects with width proportional to the duration value, and then upping the starting top coordinate for the next record to render.

    In contrast if you continue with trying to wrestle a bar chart into looking more like a Gantt, you will likely end up "fighting" the chart code, which is trying to do normal chart things. Axes will be wrong, auto-sizing will be wrong, legends will be wrong and so forth.

    Also, once you have your own simple rendering code, you'll know how to render those elements anywhere, e.g. inside of TImeline or ListGrid rows.
    Last edited by Isomorphic; 17 Nov 2022, 22:30.


      OK, thanks. I'll take a look at using the DrawPane directly.


        The current limitation arises from the fact that for FacetChart.getDataColor() and ColorMapper, colors are required to have the 6-digit hex format, which precludes other CSSColor formats, such as RGBA.

        We've committed some special handling that enables all valid CSSColor formats when FacetChart.colorMutePercent is 0 (the default). It should be in the next nightly builds (back to SC/SGWT 12.1) dated 2022-11-23. (You'd need a Feature Sponsorship to enable support for those other formats for all colorMutePercent values.)

        With that fix in place, you should be able to do something like this (modifying the SimpleChart sample):
            public Canvas getViewPanel() {
                final FacetChart chart = new FacetChart();
                chart.setFacets(new Facet("region", "Region"), new Facet("product", "Product"));
                chart.setTitle("Sales by Product and Region");
                // define custom transparent color for first facet value
                final String[] colors = chart.getDataColors();
                chart.setDataColorMapper(new ColorMapper() {
                    public String getColor(int index, Object facetValueId, String purpose) {
                        return index == 0 ? "rgb(0,0,0,0)" : colors[index];
                // ...
        but note that, as mentioned above, you're going to be fighting the chart logic that wants to show metadata for that first facet value. For example, the legend label for that value will still be present, event though the color square will be invisible.
        Last edited by Isomorphic; 22 Nov 2022, 01:41.


          Thanks for providing this. I was able to get it working with my sample chart and it gives us another option to consider.