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.

Hi,

I am new to your controls, and was wondering if there is a Grid example, or another control that enabled the user to  create something like this:

Regards,

George C. Geschwend

I am trying to display some series in a kendoChart. What is really weird is that they show then disappear in less than one second as soon as the page is loaded.

Here is my relevant HTML code :

<div id="chartOccupation" class="" style="height: 300px;"></div>

Here is my JavaScript code :

$("#chartOccupation").kendoChart({
            theme: "bootstrap",
            title: {
                text: "Répartition Occupation / Type séjour ",
                position: "bottom",
            },
            legend: {
                visible: true,
                position: "bottom",
            },
            series: [{
                name: 'séjour long',
                type: 'line',
                field: 'value',
                categoryField: 'date',
                data: [
                    {
                        value: 10,
                        date: new Date("01/01/2012")
                    }, 
                    {
                        value: 20,
                        date: new Date("01/04/2012")
                    }, 
                    {
                        value: 30,
                        date: new Date("01/07/2012")
                    }
                ]
            }],
            valueAxis: {
                min: 0,
                max: 100,
                majorUnit: 10,
                line: {
                    visible: false,
                },
                labels: {
                    format: "{0}%"
                },
            },
            categoryAxis: {
                labels: { dateFormats: { days: "d" } },
                baseUnitStep: 1,
                type: "date",
                justified: true,
                baseUnit: "days",
            }
        });

So, What is wrong in my code, and how should I fix it? Any idea?

Thanks in advance.

I am migrating an old Silverlight app that uses RadChart. The old chart is combination of column and line types. Please see image (filename: Chart.jpg).

It has this middle vertical line (which is the Actual Mean series/legend) that I am very confuse how to convert to KendoUI. Underneath, it has 2 data point value 0 and 1. The Axis is assign to the right axis. Another question is how it is placed in the middle of the chart with only 2 data points? There is no programmatic manipulation seen on the old code. 

Is this possible to do with Kendo UI chart? I also attached the XAML of the old RadChart in case needed. 

Please help.

I'm trying to get a chart to display a multi line tooltip. I've seen elsewhere that I'm supposed to put a <br/> in it for new lines, but that doesn't seem to be working. The text from the tooltip template is being run through kendo.htmlEncode, which translates the <br/> into &lt;br&gt;. which of course doesn't provide the wanted line break.

Here is a dojo.

While following the telerik example of how to set the position of the x and x axis labels on a chart (link below) Visual Studio gives me an error "'position' does not exist in type 'ChartYAxisItemLabels'".

 I checked the kendo.all.d.ts (version v2023.1.314) file that is referenced by my project and the interface is defined as follows:

    interface ChartYAxisItemLabels {
        background?: string | undefined;
        border?: ChartYAxisItemLabelsBorder | undefined;
        color?: string | undefined;
        culture?: string | undefined;
        dateFormats?: ChartYAxisItemLabelsDateFormats | undefined;
        font?: string | undefined;
        format?: string | undefined;
        margin?: number | ChartYAxisItemLabelsMargin | undefined;
        mirror?: boolean | undefined;
        padding?: number | ChartYAxisItemLabelsPadding | undefined;
        rotation?: number | ChartYAxisItemLabelsRotation | undefined;
        skip?: number | undefined;
        step?: number | undefined;
        template?: string|Function | undefined;
        visible?: boolean | undefined;
        visual?: Function | undefined;
    }

Adding the following line to the interface resolves the VS error and allows the TypeScript to compile and, when implemented, does move the axis labels to the "start" position just like in the telerik dojo example.

        position?: string | undefined;

My question is; Why is the position setting not provided on the TypeScript interface to begin with?

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/xaxis.labels#xaxislabelsposition

My requirement is to create a diagram which is using different widgets to child and parent nodes. Is there a way to use two or more different custom templates for parent and its child nodes. Please see the image below that is something I want to create

Hi,

I have a licensed kendo 2019 version in my application. Since Kendo provides individual scripts to include rather than the entire library ,I have the required  Chart Scripts in my ASP.NET MVC application.

I have upgraded the version from 2019 to the latest 2023.1.314. The 2023 upgrade includes a lot of breaking changes that includes a bunch of individual .js files. In summary, now it only needs to have:

• Theme based css (default-main.css)
• Jquery (The current version in my application is 3.6.4)
• kendo.all.min.js

Including the above 3 works as expected. However ,when using just the individual scripts for charts rather than the whole set of library which is a huge file, the kendo.drawing.js file breaks .Attachment includes the snapshot for the error.

So the question is, with the 2023 upgrade, Do I have to use kendo.all.min.js rather than using the individual scripts for just the components I have?