Guide to organizing the legend section into two columns within Apache Echarts

I'm looking to customize the legend area layout in Apache Echarts for a two-column display. Can anyone provide guidance on achieving this using legend options? I have been unable to locate any examples demonstrating this particular layout.

For reference, here is an image showing the desired legend area configuration:

Sample Image

option = {
        tooltip: {
           trigger: 'axis',
           axisPointer: {
           type: 'shadow'
        }
        },
        legend: {
          top: '3%',
        },
        grid: {
           top: '28%',
           left: '3%',
           right: '4%',
           bottom: '3%',
           containLabel: true,
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
           type: 'category',
           data: ['Actual Avg', 'Min Standard']
        },
       series: JSON.parse(data),
};
javascriptajaxecharts

Answer №1

In the world of legends, data can be defined by crafting a structure like this

legend:{
   ...,
   data: [
       {name: 'series 1', ...},
       {name: 'series 2', ...}
   ]
}

If you prefer the legend to be automatically generated, it hinges on the content within your "series".

"If data is not specified, it will be auto collected from series. For most series types, it will be gathered from either series.name or the dimension name indicated by seriesName or series.encode. For certain series such as pie and funnel, it will be extracted from the name field within series.data." - Echarts Documentation

Since I am unaware of how your "series" is configured, providing a code example is challenging, but referencing the documentation should steer you in the right direction.

Answer №2

I discovered a clever strategy for creating a 2-column layout by utilizing vertical legend alignment and setting a fixed height based on the desired number of elements in each column. For instance, you can calculate the height by multiplying the number of elements in a column by the height of a legend element.

option = {
    legend: {
      top: '3%',
      orient: 'vertical',
      align: 'left',
      height: '180px' //example
    },
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am looking to showcase a series of icons linked together by connecting lines

I have successfully designed the layout and added icons, but I am facing difficulty in creating connecting lines between them. I attempted to utilize CSS borders and pseudo-elements, yet I cannot achieve the desired outcome. If anyone could offer a CSS-ba ...

javascripthtmlcsscss-selectorsweb-frontend

Encountering a dilemma during the docker build process with npm install is frustrating, especially when faced with an error message like: "Invalid response body when attempting

Encountering a docker build issue with npm install that seems to only occur inside the docker environment. The process works perfectly on my operating system Error Step 6/8 : RUN npm cache clear --force && npm install --legacy-peer-deps ---> ...

javascriptnode.jsdockernpm

Executing Automated HTTP Calls

Working with a team that is tasked with manually filling out numerous web forms to add users to their company's database can be quite tedious. I have experience creating web automation scripts using VBScript, Java (utilizing Selenium WebDriver), and i ...

javascriptjavapythonvbscriptwebautomation

Single-select components in React Native

I am currently working on implementing a simple single selectable item feature, illustrated in the image provided below. https://i.stack.imgur.com/U2rJd.png At this moment, I have set up an array containing my data items and utilized the .map function to ...

javascriptreactjsreact-native

Identifying when an image element is within the viewport using jQuery Mobile

Looking for a solution to bypass the image size download limit on mobile devices by detecting when an image is in view and then downloading it. Also interested in replacing the image src with a smaller image to free up memory. Any tips on how to efficientl ...

javascriptjqueryjquery-mobile

I must modify the initial statement to appear in bold from the paragraph with the use of JavaScript and CSS

Mr. XYZ and Mrs. ABC are known for their integrity. They own a stylish car. In the next paragraph, I would like to emphasize the first sentence by making it bold, We admire our exceptional leader J.K.L. He shows great potential. In this section, I wan ...

javascripthtmlcssnode.js

Using JQuery to swap out all URLs on a webpage?

Seeking guidance and examples on replacing all the links in the head of a document using jQuery. I am currently working with an app that requires my site to have SSL. To address this requirement without purchasing an SSL certificate or a static IP, I am a ...

jqueryajaxssl

Nuxt: The meta title for dynamic head is not defined during server-side rendering

In my nuxt project, I am encountering an issue with the meta title and description. These values are coming from nuxt/content. The data is fetched asynchronously in the index and passed to a sub component using a getter. When generating the page, the met ...

javascriptvue.jsnuxt.jsmeta-tags

Steps to convert a phone number into JSON format

The primary focus Upon receiving an MQTT packet, it is displayed as an ASCII array in the buffer after being printed using stringify: packet = { "cmd": "publish", "retain": true, "qos": 1, "dup& ...

javascriptnode.jsjson

Caution: Prop type validation failed due to an invalid value being passed to ForwardRef(Slider)

Currently, I'm in the process of building a Material UI range Slider with two values. It functions correctly if initialized like this: const [value, setValue] = React.useState([5,20]); const [value, setValue] = React.useState([val]); const handl ...

javascriptreactjsmaterial-uislider

Is it possible for AJAX to update a button's argument?

After successfully using AJAX to extract a data value from a button click, I am now looking to pass this value as an argument to another button on the same page. Is there a way to achieve this seamlessly? Sample code from test.html: <a href="#" onClic ...

javascriptajaxjquery

Is it possible to send an ajax request following a fetch post?

I am facing an issue with a fetch post and subsequent ajax request in my code: $(document).on('change', '.item-select', function() { fetch(`/row/${entity}/${relation}/${optionValue}`,{ method: 'POST' }) ...

jqueryajaxpostfetch

Failure to populate a textbox dynamically based on dropdown selection in Ajax and Laravel

I'm having trouble displaying the ajax data in my textbox. This is my only issue; I can't seem to get the data to show up in the textbox. Please take a look at my Code in controller public function create() { $aircraft = Aircraft::all(); ...

phpjquerymysqlajaxlaravel

Tips on customizing regex to selectively identify specific strings without capturing unrelated ones

Currently, I am working with this regex: /(?<=^|\/)(?:(?!\/)(?!.*\/))(.*?)[:-]v([\d.-]+)(?=\.|$)/ The goal is to extract the captured group from the following strings: rhmtc/openshift-velero-plugin-rhel8:v1.7.9-4 oc-mirror-plug ...

javascriptnode.jsregex

What is the best way to transfer success data from an ajax request to PHP Laravel blade?

Here is an example of my ajax function calling a route in the controller: <script type="text/javascript> $(document).ready(function(){ $.ajax({ type: "get", url: '/getRooms/{{ $roomtype->name }}', ...

phpajaxlaravel

Entering a string into Angular

Within my function, I trigger the opening of a modal that is populated by a PHP file template. Within this template, there exists a div element containing the value {{msg_text}}. Inside my JavaScript file, I initialize $scope.msg_text so that when the mod ...

javascriptphphtmlangularjs

The dynamically created jQuery form is not triggering the function upon onchange event

Excuse me for troubling you, but I'm having trouble understanding why the function "fileUpload()" is not being triggered when I click the input button. After some investigation, I've discovered that the issue lies with the dynamically generated ...

jqueryajaxformsdynamiconchange

Is it possible to send two parameters to a JavaScript function using HTML?

Seeking help to develop an .html page where two string inputs are passed as parameters to a .js function, which then returns the longer of the two strings based on their lengths. Initially, I successfully created a functional .js script in VS CODE. Here i ...

javascripthtml

Error Found: Syntax Error - 'if' statement not recognized

if (fname == null || fname == "") { Receiving an error message "uncaught syntax error:unexpected token if in line 13". The error indicates "SyntaxError: missing variable name" when using Javascript lint function validateRegistration() { var emailReg ...

javascript

React transmits an incorrect argument through the function

Having a bit of trouble passing a parameter alongside the function in my for loop to create SVG paths. The props are working fine with the correct 'i' value except for selectRegion(i) which ends up getting the final value of 'i' after t ...

javascriptreactjs