Hello

I am trying to create a kendo multi axis scatter plot in my application. Both Y axis is logarithmic and x axis is numeric. 

Chart is displaying fine but x axis display in middle of charts. I want x axis to be display at bottom instead of middle. I trieds setting display X axis crossing values but I could not able to correct this. Please let me know what's wrong in my code. 

 

 

Code 

 

div.kendoChart({
                    title: {
                        text: "J & L vs Voltage",
                        font: "bold 18px arial",
                        visible: false
                    },
                    legend: {
                        visible: false,
                        position: "custom",
                        offsetX: (500 * 0.66),
                        offsetY: (400 * 0.19),
                        item: {
                            visual: function (e) {
                                let optionfont = '7pt "Open Sans", sans-serif';
                                let color = e.options.markers.background;
                                let labelColor = e.options.markers.border.color;
                                let rect = new kendo.geometry.Rect([0, 0], [450, 50]);
                                let layout = new kendo.drawing.Layout(rect, {
                                    spacing: 5,
                                    alignItems: "left"
                                });
                                let name = e.series.dashType === "longDash" ? e.series.name + ' (R)' : e.series.name;
                                let label = new kendo.drawing.Text(name, [0, 0], {
                                    fill: {
                                        color: labelColor
                                    },
                                    font: optionfont

                                });
                                const lineWidth = 6;
                                const halfLineWidth = lineWidth / 2;
                                let grpList = [];
                                let grp = new kendo.drawing.Group();
                                const size = 6;
                                markerRect = new kendo.geometry.Rect([0, 0], [size + lineWidth, size]);
                                const geometry = new kendo.geometry.Circle([size / 2 + halfLineWidth, size / 2], size / 2);
                                marker = new kendo.drawing.Circle(geometry, {
                                    fill: {
                                        color: e.options.markers.border.color
                                    },
                                    stroke: {
                                        color: e.options.markers.border.color,
                                        width: 1
                                    }
                                });
                                grpList.push(marker);

                                let lineMarker = new kendo.drawing.Path({
                                    fill: {
                                        color: e.options.markers.border.color
                                    },
                                    stroke: {
                                        color: e.options.markers.border.color,
                                        width: e.series.dashType === "longDash" ? 2 : 1,
                                        dashType: e.series.dashType === "longDash" ? "longDash" : "solid"
                                    }
                                })
                                    .moveTo(0, markerRect.size.height / 2)
                                    .lineTo(markerRect.size.width, markerRect.size.height / 2);
                                //.moveTo(markerRect.origin.x, markerRect.origin.y + markerRect.size.height / 2)
                                //.lineTo(markerRect.origin.x + markerRect.size.width, markerRect.origin.y + markerRect.size.height / 2);

                                grp.append(lineMarker);
                                for (var item of grpList) {
                                    grp.append(item);
                                }

                                layout.append(grp, label);
                                layout.reflow();

                                return layout;

                            }
                        }
                    },
                    seriesColors: ["green", "red", "blue", "maroon", "pink", "olivegreen"],
                    seriesDefaults: {
                        type: "scatterLine"
                    },
                    dataSource: {
                        data: jvlDataForChartPreview,
                        group: "sampleId"
                      
                    },
                    seriesDefaults: {
                        type: "scatterLine"
                    },
                    series: [{
                        xField: xFieldName,
                        yField: yFieldName,
                        yAxis: yFieldName,
                        categoryField: "sampleId",
                        highlight: {
                            visual: seriesHoverCircleMarker
                        },
                        markers: {
                            border: {
                                width:1,
                                color: "green"
                            },
                            type: "circle",
                            visual: seriesCircleMarker
                        },
                        tooltip: {
                            format: "X:{0} Y:{1}"
                        }
                    }, {
                        xField: xFieldName,
                        yField: rightyFieldName,
                        yAxis: rightyFieldName,
                        width: 2,
                        dashType: "longDash",
                        categoryField: "sampleId",
                        highlight: {
                            visual: seriesHoverTriangleMarker
                        },
                        markers: {
                            border: {
                                width: 2,
                                color: "red"
                            },
                            type: "circle",
                            visual: seriesTriangleMarker
                        },
                        tooltip: {
                            format: "X:{0} Y:{1}"
                        }
                    }],
                    xAxis: {
                        name:"voltage",
                        min: xScaleMin,
                        max: xScaleMax,
                        axisCrossingValues: [0.001, 10000], 
                        type: "numeric",
                        labels: {
                            font: "12px Arial,Helvetica,sans-serif",
                            format: "{0}"
                            
                        },
                        title: {
                            text: "Voltage [V]",
                            font: "16px Arial,Helvetica,sans-serif"
                        }
                       
                    },
                    yAxes: [{
                        name: yFieldName,
                        min: yScaleMin,
                        type: "log",
                        max: yScaleMax,
                        labels: {
                            font: "12px Arial,Helvetica,sans-serif",
                            format: "{0}",
                            color: "green"
                        },
                        title: {
                            text: "Current Density [mA/cm²]",
                            font: "16px Arial,Helvetica,sans-serif"
                        }
                        
                    }, {
                        name: rightyFieldName,
                        min: rightyScaleMin,
                        type: "log",
                        max: rightyScaleMax,
                        
                        labels: {
                            font: "12px Arial,Helvetica,sans-serif",
                            format: "{0}",
                            color: "red"
                        },
                        title: {
                            text: "Luminance [cd/m²]",
                        }
                       

                    }],
                    tooltip: {
                        visible: true
                    },
                    chartArea: {
                        height: 400
                    },
                    renderAs: "canvas",
                    transitions: false
                });

 

Hi team, I have created a nested donut chart..but as per requirement I have to specify which one is inner and which one is outer, so that it's easy for the user to differentiate.

But currently for showing data I am already using tooltip, also using labels

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 :

Here is my JavaScript code :

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

Thanks in advance.

Hi, 

I have one question. Is there a way to achieve "racing" bar chart where bars raise as values changes in the background and  bars "order" is changed based on the value.

I know its a long shot, but maybe there is a usable idea or workaround.

 

Thank you and regards,

Vedad

How can I set the minimum value to every single chart when I click on each one (in Multi-axis charts) ? 
See My attached picture. 

 

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.

TLDR: Never mind, user error

It seems that whether I specify labels: { visible: 'false' } or labels: { visible: 'true' }, the label is always displayed. I would have expected that specifying false would not cause the label to display. Specifying another option, such as labels: { format: '{0:C0}' }, does not cause the label to display.

Here is a dojo demonstrating the issue. Note that both the second and third bars display labels, even though the second bar has visible set to false. The first bar, specifying a format for the label, does not have its labels displayed.

Hai,

I have two questions : 

1) How can I change the width of a GridColumn, as show below? I am currently using GridColumn. Please find attached as reference.

2) How can I use Kendo UI to create a bar graph like the one shown below? The graph should update based on the user-entered values for total occurrence and time period (week/month). Does Kendo UI support this functionality?

 

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