VisualMap in ECharts featuring multiple lines for each series

If you'd like to view my modified ECharts option code, it can be found at this URL:

Alternatively, you can also access the code on codesandbox.io : https://codesandbox.io/s/apache-echarts-demo-forked-lxns3f?file=/index.js

I am aiming to color each line in a series based on their seriesIndex:

// prettier-ignore
const data = [["2000-06-05", 116], ["2000-06-06", 129], ... ]; // Sample data provided for context

// ECharts option with specified gradient line colors per seriesIndex
option = {
    visualMap: {
        type: 'piecewise',
        top: 50,
        right: 10,
        pieces: [
          { max: 30000, min: 200, color: 'red', seriesIndex: [0] },
          { max: 200, min: 100, color: 'green', seriesIndex: [1] }
        ],
        outOfRange: {
            color: 'blue'
        }
      },
      // Rest of the ECharts configuration...
};

It seems that all lines are being colored and not respecting the seriesIndex property. Have you encountered this issue with ECharts before? I have followed the documentation using visualMap.pieces.seriesIndex as shown here:

seriesIndex: [0] // or number

Every line within a series should have its own distinct color designated by the seriesIndex ID.

Answer №1

After troubleshooting, I've come to realize that seriesIndex pertains to the visualMap object, not the series itself. The correct configuration involves multiple visualMap objects:

// prettier-ignore
const data = [["2000-06-05", 116], ["2000-06-06", -129], ["2000-06-07", 135], [...truncated for brevity...]];
const dateList = data.map(function (item) {
  return item[0];
});
const valueList = data.map(function (item) {
  return item[1];
});
option = {
  // Implementing gradient line here
  visualMap: [
        {
          type: 'piecewise',
          top: 50,
          right: 10,
          seriesIndex: 1,
          pieces: [
            {
              // Range from 200 to infinite
              min: 200,
              color: "red",
              label: "Danger",
          },
            { ...other configurations... }
          ],
          outOfRange: {
            color: 'blue'
          }
       },
      { ...additional visualMap configurations... }
    ],
  title: [ 
    { ...title settings... }, 
    { ...more title settings... } 
  ],
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [ 
    { ...xAxis configurations... }, 
    { ...more xAxis configurations... } 
  ],
  yAxis: [
    {}, 
    { gridIndex: 1 }
  ],
  grid: [
    { bottom: '60%' }, 
    { top: '60%' } 
  ],
  series: [
    { ...series settings... }, 
    { ...more series settings... } 
  ]
};

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

What is the reason for labels appearing inside select boxes?

Can someone help me understand why my select box label is displaying inside the select box? For example, when I am not using react-material-validator it looks like this: https://codesandbox.io/s/5vr4xp8854 When I try to validate my select box using the r ...

Typescript headaches: Conflicting property types with restrictions

Currently, I am in the process of familiarizing myself with Typescript through its application in a validation library that I am constructing. types.ts export type Value = string | boolean | number | null | undefined; export type ExceptionResult = { _ ...

What causes the indexOf method to return -1 even when the values are present in the array?

Could someone explain why the indexOf() method returns -1 even though the values are present in the array? The includes() function also returns false for me. I feel like I must be missing something or forgetting a crucial detail. Any insights on why the ...

Upon refreshing the datatable, I encountered a issue where the checkbox cannot be selected

After updating my data table with new content through an AJAX request, I am facing an issue where I am unable to select the check-boxes in the table. I use a class selector to choose the rows that contain multiple check-boxes. The select event is placed in ...

Backdrop behind of Bootstrap modal located back of other page contents

I'm facing some challenges after transferring a website I developed locally to a live server. The modal windows are appearing behind other content on the live server, although they work perfectly fine on the local version. Despite my attempts to adju ...

Resizable dimensions for the dark mode switch

My latest project involves creating a toggle button for switching between light and dark themes using CSS, HTML, and JavaScript: id("theme-btn").addEventListener("change", function() { if (this.checked) { qs(".box").setAttribute('style', ...

Modify the Text Displayed in Static Date and Time Picker Material-UI

Looking to update the title text on the StaticDateTimePicker component? Check out this image for guidance. In the DOM, you'll find it as shown in this image. Referring to the API documentation, I learned that I need to work with components: Toolbar ...

How can permissions for video and audio be configured in Next.js?

When the button is clicked, I want to set permissions. This is how I'd like the scenario to play out: first, the method works initially and allows permission when the button is pressed. Here is my code: <button onClick={requestPermission} classN ...

"Key challenges arise when attempting to execute the node app.js script through the terminal due to various middleware compatibility

I'm a beginner with node.js and I've encountered an issue while trying to run my node app.js file after incorporating a new file named projects.js which contains the following JS code: exports.viewProject = function(req, res){ res.render(" ...

Mastering React Final Form: Displaying data using a button placed outside the form

I have a query regarding integrating my form component (<InvoiceForm.tsx />) with a button component (<Button.js />) to save its data in the database. The button component is located in another component called <InvoiceList.tsx />, which ...

Efficiently handling jsonwebtoken errors in node and express

Here is the verification function I've created: exports.verifyToken = function(req, res, next){ var token = req.body.token; jwt.verify(token, config.sessionSecret, function(err, decoded) { if(err){ return next(err); }else{ ...

Make sure to properly check the size of the image before uploading it in express js

Below is the code I have written to verify if an image's size and width meet the specified criteria: im.identify(req.files.image,function (err,features) { //console.log(features); if(features.width<1000 ...

When I attempt to send a PUT request, the req.body object appears to be empty. This issue is occurring even though I have implemented the method override middleware

I am currently facing an issue with updating a form using the put method. To ensure that my form utilizes a PUT request instead of a POST, I have implemented the method override middleware. However, upon checking the req.body through console log, it appear ...

Encountered issues while installing a package with npm instead of yarn

I have established a Git repository that will serve as an NPM package in another project. Let's refer to this sharable repository as genesis-service-broker. Within one of my services (specifically the activation service), I am utilizing this shareabl ...

Struggling to capture an error generated by Sequelize within a universal Middleware block

In a test project, I have successfully implemented CLS transaction control in Sequelize using 'cls-hooked'. The transactions work seamlessly both in the command line and with Express. They are injected and managed automatically, rolling back on a ...

Converting HTML/Javascript codes for Android Application use in Eclipse: A Step-by-Step Guide

How can I implement this in Java? Here is the HTML: <head> <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title> <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="styles ...

Obtain the breakpoint value from Bootstrap 5

We have recently updated our project from Bootstrap 4 to Bootstrap 5. I am trying to retrieve the value of a breakpoint in my TypeScript/JavaScript code, which used to work in Bootstrap 4 with: window .getComputedStyle(document.documentElement) .g ...

Guide to adding a Json file in a PHP file with PHP

I have a PHP file with an embedded JSON file, and I want to update the JSON file with new information from a form. The form looks like this: <form action="process.php" method="POST"> First name:<br> <input type="text" name="firstName"> ...

What is the process for incorporating an external script into my Vue methods?

After a user registers, I need to send them a confirmation email using vue.js. I am looking to implement the script provided by . How can I incorporate the "Email.send" method into my vue.js application? <script src="https://smtpjs.com/v3/smtp.js"> ...

Activate Bootstrap button functionality with JavaScript

Hey team, I've got a Bootstrap button on my HTML page: ..... <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> ... <div class="accept-btn"> <button type="button" class="bt ...