Chart rangeBar Legend not grouped

1 Answer 38 Views
Charts
Brian
Top achievements
Rank 1
Brian asked on 19 Jul 2023, 08:11 PM

Using the demo (https://docs.telerik.com/kendo-ui/knowledge-base/timeline-using-range-bars) as a base, each has a unique ID.  I have adjusted the data in the datasource to only use two different colors.  The demo turns off the legend.  But I need a legend to indicate what the colors on my chart mean.  Turning on the legend (for both the demo and for mine) has two separate issues.

1) The legend contains a separate entry for each individual bar rather than combining them (either by category field or (prefered) the color).

2) The color in the legend doesn't match the color of the bar.

Here is the creation of my chart:

   $("#LDP_chart").kendoChart({
        dataSource: {
            data: cdata.results,
            group: {
                field: "id",
                dir: "asc"
            }
        },
        series: [{
            type: "rangeBar",
            fromField: "from",
            toField: "to",
            categoryField: "key",
            name: "#: group.items[0].seriesName #",
            colorField: "color",
            spacing: -1
        }],
        valueAxis: {
            name: "value",
            min: new Date(startDate + " 00:00").getTime() / 1000,
            max: new Date(endDate + " 23:59:59").getTime() / 1000,
            majorUnit: 24 * 60 * 60,
            majorGridLines: {
                color: "black"
            },
            labels: {
              template: "#= kendo.toString(new Date(value * 1000), 'ddd MM/dd') #",
              rotation: "auto"
            }
        },
        categoryAxis: {
            name: "category"
        },
        legend: {
          visible: true,
          position: 'bottom'
        },
    });

Google isn't helping me here.  I did find an article saying #2 isn't possible because the legend isn't using colorField parameter of the datasource, but that was pretty dated.

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 24 Jul 2023, 01:40 PM

Hi, Brian,

The legend entries depend on the number of groups in the data. Since you have a group for each unique ID, then you will have a legend item for all of the entries.

If you want to limit them to the amount of colors, then group the data by color instead:

            group: {
                field: "color",
                dir: "asc"
            }

The reason behind the second behavior(legend colors) is explained here:

https://www.telerik.com/forums/make-same-colors-on-2-charts-with-legend#4334172 

Let me know if you have any questions.

Best Regards,
Georgi Denchev
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Brian
Top achievements
Rank 1
commented on 27 Jul 2023, 08:33 PM

That doesn't work.  Because this is a range bar graph, if the id's are not unique, it combines all the bars into a single bar.

Georgi Denchev
Telerik team
commented on 01 Aug 2023, 09:15 AM

Hi, Brian,

My apologies about this oversight.

In this case you can try to use the external legend approach:

https://docs.telerik.com/kendo-ui/knowledge-base/external-legend 

Here are you're free to manipulate the legend data in any way that you need. You can filter out any duplicates before displaying the items.

Best Regards,

Georgi

Tags
Charts
Asked by
Brian
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or