Kendo MultiAxis Charts X Axis is displaying in middle of chart rather than bottom.

0 Answers 66 Views
Charts
Brijesh
Top achievements
Rank 1
Brijesh asked on 20 Jul 2023, 02:10 PM

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
                });
Brijesh
Top achievements
Rank 1
commented on 26 Jul 2023, 12:00 PM

can anyone from kendo team help me to answer my questions ?
Nikolay
Telerik team
commented on 31 Jul 2023, 08:58 AM

Hi Brijesh,

Thank you for sharing the Chart declaration.

I examined it and I can say it looks good. Is it possible to replicate this undesired behavior in a Dojo demo? This will help me fully understand the case and allow me to advise further.

Regards,

Nikolay

No answers yet. Maybe you can help?

Tags
Charts
Asked by
Brijesh
Top achievements
Rank 1
Share this question
or