Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
need to get axisLabel.maxLabel
See original GitHub issue- I am using English in this issue.
General Questions
- I have read the document and examples and tried to solve it by myself.
- I have searched for similar issues and that didn’t help.
- I have tried with the latest version of ECharts and still have this problem.
In this issue, I have provided information with:
- issue type
- one sentence description in issue details
- demo if this is bug report
Issue Type
- I have a question to ask about how to use ECharts to …
- I have a bug to report
- I have a feature to request, e.g.: I’d like a new feature that …
- I have a feature to enhance, e.g.: The current feature should be improved in the way that …
- There’s something wrong with the documents
- Others, or I’m not sure which issue types to choose here
Issue Details
right now, it’s not possible to programmatically check what the maximum label value for yAxis is (at least there is no documentation showing how to get it.
as shown in the following example, we are trying to determine if some points of different series overlap, and if so, we want to use a bigger symbolSize to indicate that 2 points overlap. to do so, the function dynamicSymbolSize in my example is created. it works by normalizing the values defined as a seriesGroup by determining what the highest value of their corresponding yAxis is. this would have worked/will work ONLY IF yAxis.max is already predefined or by coincident, if the highest value is also the highest axisLabel. otherwise the normalization doesn’t work as wished.
if you check my example, the part marked with //TODO is where I need a function like yAxis.getMaxLabel() or whatever it’s called/is going to be called; or a property which delivers the set value.
Expected Behavior
the function yAxis.getMaxLabel() (or the property…) should deliver the maximum value used for labeling yAxis.
Current Behavior
I have not found any function/property that does this.
Online Example
https://jsfiddle.net/byn4eLvp/2/
var dynamicSymbolSize = function (value, params, dataHelper, basicSize, seriesGroup, chart){
var default_value = basicSize;
var multiplier = 1;
var axisInfo = {
max: {},
axisSeries:{}
};
var j = 0;
var seriesName = params.seriesName;
if (typeof chart !== typeof undefined)
{
if (!chart.hasOwnProperty('axisInfo') || !chart.axisInfo || !chart.axisInfo.axisSeries.hasOwnProperty(seriesName))
{
if (chart.hasOwnProperty('axisInfo'))
{
axisInfo = chart.axisInfo;
}
var config = chart.getOption();
console.log(config);
for (var s = 0; s < config.series.length; s++)
{
var series = config.series[s];
var index = null;
if ((index = seriesGroup.indexOf(series.name)) !== -1)
{
var col = series.name;
var yAxisIndex = series.yAxisIndex;
if (typeof yAxisIndex !== typeof undefined && yAxisIndex !== null)
{
var yAxis = config.yAxis[yAxisIndex];
var max = null;
if (yAxis.max)
{
max = yAxis.max;
}
else
{
//TODO: use yAxis.getMax() instead.
max = dataHelper.getMax(col);
}
if (!axisInfo.max.hasOwnProperty(yAxisIndex))
{
axisInfo.max[yAxisIndex] = 0;
}
if (!axisInfo.axisSeries.hasOwnProperty(series.name))
{
axisInfo.axisSeries[series.name] = yAxisIndex;
}
axisInfo.max[yAxisIndex] = Math.max(axisInfo.max[yAxisIndex], max);
}
}
}
chart.axisInfo = axisInfo;
}
else
{
axisInfo = chart.axisInfo;
}
}
//<script>
var row = dataHelper.find(dataHelper.getKeyColumn(), value[0]);
if(row && seriesGroup)
{
row = row[0];
// traverse the columns in reverse order - higher indices will be drawn on top of lower ones.
for(j = seriesGroup.length - 1; j >= 0; j--)
{
var column = seriesGroup[j];
if(column === seriesName)
{
break;
}
var seriesMax = 0;
var columnMax = 0;
if (axisInfo.max)
{
columnMax = axisInfo.max[axisInfo.axisSeries[column]];
seriesMax = axisInfo.max[axisInfo.axisSeries[seriesName]];
}
var normalizedSeriesVal = seriesMax?(value[1]/seriesMax):0;
var normalizedColumnVal = seriesMax?(row[column]/columnMax):0;
if(Math.abs(normalizedColumnVal - normalizedSeriesVal) <= 0.005)
{
multiplier++;
}
}
}
return multiplier * default_value;
};
//<script>
var data_records_5bf2e4e667126_dup_5bf2e4e68d677 = new EChartsData({
"source": [
/*
{
"time": "2016-02-10 02:00:00.000000",
"scenario": 1080,
"scenario_name": "Inbound Authentication",
"imsi_group_id": "1",
"imsi_group_name": "HPLMN",
"user_tot": "120",
"user_ok": 68,
"user_uc": 34,
"user_nc": 2,
"user_nok": "52",
"user_nr": 16,
"trans_tot": "139",
"trans_ok": 78,
"trans_uc": 39,
"trans_nc": 2,
"trans_suc": 78,
"trans_nr": 20,
"user_suc": 79.07
}, {
"time": "2016-02-10 03:00:00.000000",
"scenario": 1080,
"scenario_name": "Inbound Authentication",
"imsi_group_id": "1",
"imsi_group_name": "HPLMN",
"user_tot": "110",
"user_ok": 68,
"user_uc": 38,
"user_nc": 0,
"user_nok": "42",
"user_nr": 4,
"trans_tot": "143",
"trans_ok": 87,
"trans_uc": 50,
"trans_nc": 0,
"trans_suc": 93.55,
"trans_nr": 6,
"user_suc": 94.44
}, {
"time": "2016-02-10 04:00:00.000000",
"scenario": 1080,
"scenario_name": "Inbound Authentication",
"imsi_group_id": "1",
"imsi_group_name": "HPLMN",
"user_tot": "111",
"user_ok": 77,
"user_uc": 30,
"user_nc": 0,
"user_nok": "34",
"user_nr": 4,
"trans_tot": "136",
"trans_ok": 93,
"trans_uc": 34,
"trans_nc": 0,
"trans_suc": 91.18,
"trans_nr": 9,
"user_suc": 95.06
},
*/
{
"time": "2016-02-10 05:00:00.000000",
"scenario": 1080,
"scenario_name": "Inbound Authentication",
"imsi_group_id": "1",
"imsi_group_name": "HPLMN",
"user_tot": "114",
"user_ok": 77,
"user_uc": 33,
"user_nc": 0,
"user_nok": "37",
"user_nr": 4,
"trans_tot": "135",
"trans_ok": 92,
"trans_uc": 37,
"trans_nc": 0,
"trans_suc": 93.88,
"trans_nr": 6,
"user_suc": 95.06
}, {
"time": "2016-02-10 06:00:00.000000",
"scenario": 1080,
"scenario_name": "Inbound Authentication",
"imsi_group_id": "1",
"imsi_group_name": "HPLMN",
"user_tot": "117",
"user_ok": 78,
"user_uc": 33,
"user_nc": 0,
"user_nok": "39",
"user_nr": 6,
"trans_tot": "143",
"trans_ok": 100,
"trans_uc": 36,
"trans_nc": 0,
"trans_suc": 93.46,
"trans_nr": 7,
"user_suc": 92.86
}, {
"time": "2016-02-10 07:00:00.000000",
"scenario": 1080,
"scenario_name": "Inbound Authentication",
"imsi_group_id": "1",
"imsi_group_name": "HPLMN",
"user_tot": "126",
"user_ok": 84,
"user_uc": 35,
"user_nc": 0,
"user_nok": "42",
"user_nr": 7,
"trans_tot": "143",
"trans_ok": 97,
"trans_uc": 39,
"trans_nc": 0,
"trans_suc": 93.27,
"trans_nr": 7,
"user_suc": 92.31
}, {
"time": "2016-02-10 08:00:00.000000",
"scenario": 1080,
"scenario_name": "Inbound Authentication",
"imsi_group_id": "1",
"imsi_group_name": "HPLMN",
"user_tot": "122",
"user_ok": 82,
"user_uc": 36,
"user_nc": 0,
"user_nok": "40",
"user_nr": 4,
"trans_tot": "132",
"trans_ok": 87,
"trans_uc": 39,
"trans_nc": 0,
"trans_suc": 93.55,
"trans_nr": 6,
"user_suc": 95.35
}, {
"time": "2016-02-10 09:00:00.000000",
"scenario": 1080,
"scenario_name": "Inbound Authentication",
"imsi_group_id": "1",
"imsi_group_name": "HPLMN",
"user_tot": "120",
"user_ok": 84,
"user_uc": 31,
"user_nc": 0,
"user_nok": "36",
"user_nr": 5,
"trans_tot": "140",
"trans_ok": 96,
"trans_uc": 37,
"trans_nc": 0,
"trans_suc": 93.2,
"trans_nr": 7,
"user_suc": 94.38
}
],
"dimensions": [
{
"name": "time",
"type": "time",
"displayName": "Time",
"color": null,
"hide": false,
"format": null
}, {
"name": "scenario",
"type": "int",
"displayName": "Scenario",
"color": null,
"hide": false,
"format": null
}, {
"name": "user_ok",
"type": "float",
"displayName": "User OK",
"color": null,
"hide": false,
"format": null
}, {
"name": "user_uc",
"type": "float",
"displayName": "User UC",
"color": null,
"hide": false,
"format": null
}, {
"name": "user_nc",
"type": "float",
"displayName": "User NC",
"color": null,
"hide": false,
"format": null
}, {
"name": "user_nr",
"type": "float",
"displayName": "User NR",
"color": null,
"hide": false,
"format": null
}, {
"name": "user_suc",
"type": "float",
"displayName": "User Success",
"color": null,
"hide": false,
"format": {"conversion_factor": 1, "type": "normal", "suffix": null, "format": 8, "momentJsFormat": null}
}, {
"name": "trans_ok",
"type": "float",
"displayName": "Trans OK",
"color": null,
"hide": false,
"format": null
}, {
"name": "trans_uc",
"type": "float",
"displayName": "Trans UC",
"color": null,
"hide": false,
"format": null
}, {
"name": "trans_nc",
"type": "float",
"displayName": "Trans NC",
"color": null,
"hide": false,
"format": null
}, {
"name": "trans_nr",
"type": "float",
"displayName": "Trans NR",
"color": null,
"hide": false,
"format": null
}, {
"name": "trans_suc",
"type": "float",
"displayName": "Trans Success",
"color": null,
"hide": false,
"format": {"conversion_factor": 1, "type": "normal", "suffix": null, "format": 8, "momentJsFormat": null}
}
],
"keyColumn": "time"
});
data_records_5bf2e4e667126_dup_5bf2e4e68d677.setData(data_records_5bf2e4e667126_dup_5bf2e4e68d677.convert());
var line_chart1_inbound = echarts.init(document.getElementById('line_chart_1_inbound'), null, {
"devicePixelRatio": null,
"renderer": "svg",
"width": 570,
"height": 450
});
line_chart1_inbound.setOption({
"dataZoom": [
{"show": true, "xAxisIndex": [0, 1], "start": 0, "end": 100, "type": "inside"}, {
"show": true,
"xAxisIndex": [0, 1],
"start": 0,
"end": 100,
"type": "slider"
}
],
"grid": [
{
"show": true,
"left": "13%",
"width": "85%",
"top": 25,
"height": 175,
"borderColor": "transparent",
"containLabel": "1"
}, {
"show": true,
"left": "13%",
"width": "85%",
"top": 210,
"height": 195,
"borderColor": "transparent",
"containLabel": "1"
}
],
"xAxis": [
{
"show": true,
"gridIndex": 0,
"type": "time",
"scale": true,
"axisLine": {"lineStyle": {"color": "#999999"}},
"splitArea": {"areaStyle": {"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]}},
"splitNumber": "10"
}, {
"show": true,
"gridIndex": 1,
"type": "time",
"scale": true,
"axisLine": {"lineStyle": {"color": "#999999"}},
"splitArea": {"areaStyle": {"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]}}
}
],
"yAxis": [
{
"show": true,
"gridIndex": 0,
"type": "value",
"name": "Users",
"nameRotate": 90,
"nameGap": 40,
"nameLocation": "middle",
"nameTextStyle": {"fontWeight": "bolder", "fontSize": 15},
"axisLine": {"lineStyle": {"color": "#999999"}},
"splitArea": {"areaStyle": {"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]}},
"splitNumber": "10"
}, {
"show": true,
"gridIndex": 0,
"type": "value",
"max": 100,
"axisLine": {"lineStyle": {"color": "#9a322e"}},
"splitLine": {"show": false},
"splitArea": {"areaStyle": {"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]}},
"splitNumber": "10"
}, {
"show": true,
"gridIndex": 1,
"type": "value",
"name": "Transactions",
"nameRotate": 90,
"nameGap": 40,
"nameLocation": "middle",
"nameTextStyle": {"fontWeight": "bolder", "fontSize": 15},
"axisLine": {"lineStyle": {"color": "#999999"}},
"splitArea": {"areaStyle": {"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]}},
"splitNumber": "10"
}, {
"show": true,
"gridIndex": 1,
"type": "value",
"max": 100,
"axisLine": {"lineStyle": {"color": "#9a322e"}},
"splitLine": {"show": false},
"splitArea": {"areaStyle": {"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]}},
"splitNumber": "10"
}
],
"series": [
{
"name": "user_ok",
"type": "line",
"xAxisIndex": 0,
"yAxisIndex": 0,
"data": data_records_5bf2e4e667126_dup_5bf2e4e68d677.getColumn(['time', 'user_ok']),
"hasValues": true,
"itemStyle": {"color": "#00a650", "borderWidth": "2", "opacity": "1"},
"symbol": "circle",
"symbolSize": function (value, params){
return dynamicSymbolSize(value, params, data_records_5bf2e4e667126_dup_5bf2e4e68d677, 4, ["user_ok", "user_suc"], line_chart1_inbound);
},
"lineStyle": {"color": "#00a650", "width": "2", "type": "solid", "opacity": "1"}
},
{
"name": "user_suc",
"type": "line",
"xAxisIndex": 0,
"yAxisIndex": 1,
"itemStyle": {"color": "#9a322e", "borderWidth": "2", "opacity": "1"},
"data": data_records_5bf2e4e667126_dup_5bf2e4e68d677.getColumn(['time', 'user_suc']),
"hasValues": true,
"symbol": "circle",
"symbolSize": function (value, params){
return dynamicSymbolSize(value, params, data_records_5bf2e4e667126_dup_5bf2e4e68d677, 4, ["user_ok", "user_suc"], line_chart1_inbound);
},
"lineStyle": {"color": "#9a322e", "width": "2", "type": "solid", "opacity": "1"}
}, {
"name": "trans_ok",
"type": "line",
"xAxisIndex": 1,
"yAxisIndex": 2,
"data": data_records_5bf2e4e667126_dup_5bf2e4e68d677.getColumn(['time', 'trans_ok']),
"hasValues": true,
"itemStyle": {"color": "#00a650", "borderWidth": "2", "opacity": "1"},
"symbol": "circle",
"symbolSize": function (value, params){
return dynamicSymbolSize(value, params, data_records_5bf2e4e667126_dup_5bf2e4e68d677, 4, ["trans_ok", "trans_suc"], line_chart1_inbound);
},
"lineStyle": {"color": "#00a650", "width": "2", "type": "solid", "opacity": "1"}
},
{
"name": "trans_suc",
"type": "line",
"xAxisIndex": 1,
"yAxisIndex": 3,
"itemStyle": {"color": "#9a322e", "borderWidth": "2", "opacity": "1"},
"data": data_records_5bf2e4e667126_dup_5bf2e4e68d677.getColumn(['time', 'trans_suc']),
"hasValues": true,
"symbol": "circle",
"symbolSize": function (value, params){
return dynamicSymbolSize(value, params, data_records_5bf2e4e667126_dup_5bf2e4e68d677, 4, ["trans_ok", "trans_suc"], line_chart1_inbound);
},
"lineStyle": {"color": "#9a322e", "width": "2", "type": "solid", "opacity": "1"}
}
],
"title": [
{
"show": true,
"text": "Inbound",
"textStyle": {"fontSize": 15, "fontWeight": "bold", "color": "#306fb6"},
"width": "100%",
"top": "top",
"left": "center",
"subtextStyle": {
"color": "#306fb6",
"rich": {
"hr": {
"borderColor": "#999999",
"width": "100%",
"borderWidth": "1",
"height": "0",
"lineHeight": "10"
}
}
}
}
],
"backgroundColor": "#ffffff",
"textStyle": {"color": "#306fb6"},
"legend": {"show": "", "width": "80%", "top": "10%", "left": "center", "textStyle": {"color": "#306fb6"}}
});
Topics
- Legend
- Tooltip
- Event
- Performance
- SVG
- Map
- ECharts GL
- Third-party libraries, e.g.: Vue.js, React
Anything Else We Need to Know
Ahm, I don’t think so, please ask if you need…
Environment
- ECharts version: latest
Issue Analytics
- State:
- Created 5 years ago
- Comments:6
Top Results From Across the Web
need to get axisLabel.maxLabel · Issue #9429 - GitHub
I am using English in this issue. General Questions I have read the document and examples and tried to solve it by myself....
Read more >echarts - Format maxLabel on axis differently than other labels
I am hoping to use a different format specifically for the top axis label on my y-axis. For example, if I have a...
Read more >Get Y-Axis Label Width? - ROOT Forum
I was thinking you would have to somehow query the y-axis label width (or x-axis label height), but I don't know how to...
Read more >how to get the x axis label from figure handle? - MathWorks
I have got the handle to the figure using s=hgload(myimagefile);. I would like to know the x axis label in the image.
Read more >X - Axis label display customization | Infragistics Forums
I am plotting points in a line chart continuously, reading data from a device every second. This may go upto an hour or...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This is perhaps not the best way to achieve this, but you could theoretically do something like the following:
This example gets the top pixel coordinate from the desired grid and converts then this pixel to the corresponding series y-coordinate. Since we are converting PIXELS to coords, I do not know how accurate this is for your use-case…
This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!