I have set up a custom multiple YAXIS bar chart, and I am trying to keep all the yaxis always visible, no matter if their related series have been hidden by clicking them on the legend.
One or more series can be attached to the same YAXIS.
Image 1 description: initial state, where all YAXIS are perfectly rendered.
As you can see in this second screenshot of my chart, if YAXIS are hidden when toggling series, those yaxis that should be kept are not properly displayed, since they are partially off canvas.
Off-canvas YAXIS when toggling series
Image 2 description: The name of the right "C.R." YAXIS has been placed off canvas.
I know it is possible to keep them fix, since there is one of the ECHART's demo examples that demonstrate it (you may need to first add legend: { show: true }, into the options object):
I have also checked other demo examples in order to find any hint, but do not behave the same way. The following examples hide YAXIS when toggling the related series (this is the current behavior of my ECHART, which I am trying to avoid):
- https://echarts.apache.org/examples/en/editor.html?c=bar-negative2
- https://echarts.apache.org/examples/en/editor.html?c=bar-tick-align
The first one is the only valid example I have found that could help me.
I have been reading the whole documentation thoroughly. Even I've read carefully all the options from each of those three charts by clicking on the top-left tab Full Code and Option preview in order to find which is the difference.
But I still can not figure out which is the property that accomplishes to keep all YAXIS always visible. Or maybe it is the combination of two or more options working together.
This is the whole options object I am implementing (data arrays are truncated):
{
"title": {
"show": true,
"text": "Demo title",
"textStyle": {
"color": "#000",
"fontStyle": "normal",
"fontWeight": "normal",
"fontFamily": "sans-serif",
"fontSize": 20,
"lineHeight": 30
},
"subtext": "Demo subtitle",
"subtextStyle": {
"color": "#333",
"fontStyle": "normal",
"fontWeight": "normal",
"fontFamily": "sans-serif",
"fontSize": 14,
"align": "left",
"verticalAlign": "top",
"lineHeight": 21
},
"textAlign": "left",
"textVerticalAlign": "top",
"padding": [
0,
0,
20,
0
],
"itemGap": 0,
"left": "auto",
"top": "auto",
"right": "auto",
"bottom": "auto",
"backgroundColor": "transparent"
},
"legend": {
"type": "scroll",
"show": true,
"zlevel": 0,
"z": 2,
"left": "center",
"top": "auto",
"right": "auto",
"bottom": 0,
"width": "auto",
"height": "auto",
"orient": "horizontal",
"align": "auto",
"padding": [
10,
10
],
"itemGap": 25,
"itemWidth": 25,
"itemHeight": 14,
"symbolKeepAspect": true,
"selectedMode": true,
"inactiveColor": "#ccc",
"textStyle": {
"color": "#000",
"fontSize": 14,
"lineHeight": 21,
"align": "left",
"verticalAlign": "middle",
"padding": 0
},
"tooltip": {
"show": true
},
"icon": "circle",
"borderWidth": 0,
"borderRadius": 5,
"scrollDataIndex": 0,
"pageButtonItemGap": 27,
"pageButtonGap": 25,
"pageButtonPosition": "end",
"pageFormatter": "{current} / {total}",
"pageIconColor": "#0d47a1",
"pageIconInactiveColor": "#aaa",
"pageIconSize": 20,
"pageTextStyle": {
"fontSize": 14,
"lineHeight": 21
},
"animation": false,
"animationDurationUpdate": 800,
"selector": [
{
"type": "all",
"title": "All"
},
{
"type": "inverse",
"title": "Inverse"
}
],
"selectorLabel": {
"show": true,
"distance": 5,
"rotate": 0,
"offset": [
0,
0
],
"color": "#ffffff",
"fontSize": 16,
"lineHeight": 24,
"align": "center",
"verticalAlign": "middle",
"backgroundColor": "#0d47a1",
"borderColor": "transparent",
"borderWidth": 3,
"borderRadius": 3,
"padding": [
7,
10,
4,
10
]
},
"selectorPosition": "auto",
"selectorItemGap": 10,
"selectorButtonGap": 20
},
"grid": {
"show": false,
"left": 67,
"top": 140,
"right": 201,
"bottom": 100,
"width": "auto",
"height": 490,
"containLabel": true
},
"xAxis": {
"show": true,
"position": "bottom",
"offset": 5,
"type": "category",
"nameLocation": "end",
"nameGap": 25,
"nameRotate": 0,
"inverse": false,
"boundaryGap": true,
"axisLabel": {
"show": true,
"interval": "auto",
"inside": false,
"rotate": 45,
"margin": 12,
"showMinLabel": true,
"showMaxLabel": true,
"fontSize": 11,
"lineHeight": 11,
"align": "right"
},
"splitLine": {
"show": false
},
"data": [
"01/01/2020",
"02/01/2020",
"03/01/2020",
"04/01/2020",
"05/01/2020",
...
]
},
"yAxis": [
{
"show": true,
"type": "value",
"name": "CAPTURE RATE",
"nameLocation": "middle",
"nameRotate": 90,
"nameGap": 72,
"nameTextStyle": {
"fontWeight": "normal",
"fontSize": 11,
"align": "center",
"verticalAlign": "middle"
},
"min": 0,
"position": "left",
"offset": 0,
"inverse": false,
"axisLabel": {},
"axisLine": {
"show": true,
"onZero": true
},
"metric": "CAPTURE_RATE",
"metricsGroup": "TRAFFIC",
"formattingType": "PERCENTAGE",
"yaxisKey": "TRAFFIC__PERCENTAGE"
},
{
"show": true,
"type": "value",
"name": "SALES",
"nameLocation": "middle",
"nameRotate": -90,
"nameGap": 72,
"nameTextStyle": {
"fontWeight": "normal",
"fontSize": 11,
"align": "center",
"verticalAlign": "middle"
},
"min": 0,
"position": "right",
"offset": 0,
"inverse": false,
"axisLabel": {},
"axisLine": {
"show": true,
"onZero": true
},
"metric": "SALES",
"metricsGroup": "SALES",
"formattingType": "FLOAT_NUMBER",
"yaxisKey": "SALES__FLOAT_NUMBER"
},
{
"show": true,
"type": "value",
"name": "TICKETS",
"nameLocation": "middle",
"nameRotate": -90,
"nameGap": 72,
"nameTextStyle": {
"fontWeight": "normal",
"fontSize": 11,
"align": "center",
"verticalAlign": "middle"
},
"min": 0,
"position": "right",
"offset": 92,
"inverse": false,
"axisLabel": {},
"axisLine": {
"show": true,
"onZero": true
},
"metric": "TICKETS",
"metricsGroup": "SALES",
"formattingType": "NON_FLOAT_NUMBER",
"yaxisKey": "SALES__NON_FLOAT_NUMBER"
},
{
"show": true,
"type": "value",
"name": "C.R.",
"nameLocation": "middle",
"nameRotate": -90,
"nameGap": 72,
"nameTextStyle": {
"fontWeight": "normal",
"fontSize": 11,
"align": "center",
"verticalAlign": "middle"
},
"min": 0,
"position": "right",
"offset": 184,
"inverse": false,
"axisLabel": {},
"axisLine": {
"show": true,
"onZero": true
},
"metric": "CONVERSION_RATE",
"metricsGroup": "SALES",
"formattingType": "PERCENTAGE",
"yaxisKey": "SALES__PERCENTAGE"
}
],
"dataZoom": [],
"tooltip": {
"show": true,
"trigger": "item",
"axisPointer": {
"type": "shadow"
}
},
"axisPointer": {},
"toolbox": {
"show": true,
"orient": "horizontal",
"itemSize": 17,
"itemGap": 15,
"showTitle": true,
"feature": {
"saveAsImage": {
"type": "png",
"name": "tbretail_chart",
"backgroundColor": "#fff",
"connectedBackgroundColor": "#fff",
"excludeComponents": [
"toolbox"
],
"show": true,
"title": "Save as image"
},
"restore": {
"show": true,
"title": "Restore"
},
"dataView": {
"show": false,
"title": "Data view",
"readOnly": true,
"lang": [
"Data view",
"Close",
"Refresh"
],
"backgroundColor": "#fff",
"textareaColor": "#fff",
"textareaBorderColor": "#333",
"textColor": "#000",
"buttonColor": "#0d47a1",
"buttonTextColor": "#fff"
},
"dataZoom": {
"show": true,
"title": {
"zoom": "Area zooming",
"back": "Restore area zooming"
},
"filterMode": "filter"
},
"magicType": {
"title": "Switch type"
},
"brush": {
"type": "rect",
"title": "Selection"
}
},
"iconStyle": {
"borderColor": "#0d47a1",
"borderWidth": 2
}
},
"brush": {},
"dataset": {},
"aria": {},
"series": [
{
"metric": "CAPTURE_RATE",
"yaxisTarget": {
"metricsGroup": "TRAFFIC",
"formattingType": "PERCENTAGE",
"yaxisKey": "TRAFFIC__PERCENTAGE"
},
"yAxisIndex": 0,
"type": "bar",
"name": "Capture rate (212.2%)",
"data": [
{
"value": 0,
"tooltip": {}
},
...
],
"label": {
"show": false,
"position": "top",
"rotate": 90,
"color": "#4f4f4f",
"fontSize": 12,
"lineHeight": 12,
"align": "left",
"verticalAlign": "middle"
},
"smooth": true,
"totalValue": "212.2%"
},
{
"metric": "SALES",
"yaxisTarget": {
"metricsGroup": "SALES",
"formattingType": "FLOAT_NUMBER",
"yaxisKey": "SALES__FLOAT_NUMBER"
},
"yAxisIndex": 1,
"type": "bar",
"name": "Sales (12447857.85 €)",
"data": [
{
"value": 12608.28,
"tooltip": {}
},
...
],
"label": {
"show": false,
"position": "top",
"rotate": 90,
"color": "#4f4f4f",
"fontSize": 12,
"lineHeight": 12,
"align": "left",
"verticalAlign": "middle"
},
"smooth": true,
"totalValue": 12447857.85
},
{
"metric": "TICKETS",
"yaxisTarget": {
"metricsGroup": "SALES",
"formattingType": "NON_FLOAT_NUMBER",
"yaxisKey": "SALES__NON_FLOAT_NUMBER"
},
"yAxisIndex": 2,
"type": "bar",
"name": "Tickets (82474)",
"data": [
{
"value": 106,
"tooltip": {}
},
...
],
"label": {
"show": false,
"position": "top",
"rotate": 90,
"color": "#4f4f4f",
"fontSize": 12,
"lineHeight": 12,
"align": "left",
"verticalAlign": "middle"
},
"smooth": true,
"totalValue": 82474
},
{
"metric": "CONVERSION_RATE",
"yaxisTarget": {
"metricsGroup": "SALES",
"formattingType": "PERCENTAGE",
"yaxisKey": "SALES__PERCENTAGE"
},
"yAxisIndex": 3,
"type": "bar",
"name": "C.R. (2.3%)",
"data": [
{
"value": 7.61,
"tooltip": {}
},
...
],
"label": {
"show": false,
"position": "top",
"rotate": 90,
"color": "#4f4f4f",
"fontSize": 12,
"lineHeight": 12,
"align": "left",
"verticalAlign": "middle"
},
"smooth": true,
"totalValue": "2.3%"
}
],
"color": [
"#67B0FE",
"#8091B4",
"#56C8EC",
"#7BC9BA",
"#B1EC5C",
"#E5C872",
"#D28787",
"#91C283",
"#B39E75",
"#D8A1A1",
"#E4CE58",
"#9BAE84",
"#AA8D8D",
"#8CD49B",
"#F16363",
"#99B0D5",
"#B9BC79",
"#CF90DD",
"#FFE760",
"#7DD197",
"#AF5D6D",
"#D49D76",
"#E7B09A",
"#CF4E4E"
],
"backgroundColor": "#fff",
"textStyle": {
"color": "#000",
"fontStyle": "normal",
"fontWeight": "normal",
"fontFamily": "sans-serif",
"fontSize": 15,
"lineHeight": 23
},
"animation": true,
"animationThreshold": 2000,
"animationDuration": 1000,
"animationEasing": "cubicOut",
"animationDelay": 0,
"animationDurationUpdate": 300,
"animationEasingUpdate": "cubicOut",
"animationDelayUpdate": 0,
"blendMode": "source-over",
"hoverLayerThreshold": 3000,
"useUTC": false
}
Thank you very much in advance for your help.
Edit:
SOLVED
To achieve a fixed yaxis you must set both its min and max properties.
Therefore, you can either set them all as fixed or only some of them. It is completely up to you.
