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 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