question-mark
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.

set SplitArea specific interval color

See original GitHub issue

I want to color yaxis from value x to y with some color,I used splitArea but is no use to me because is a splitArea is a repeater, repeats color based on given interval.

image

image

Using split area is not good option since repeats the colors

yAxis: {
      splitArea:{
         show:true,
         areaStyle:{
          color:["rgba(255,0,0,0.7)",'yellow','green','green','green']
          }
        }
    },

It would be nice if echart will support something like , This is standard behavior in the popular charts like highcharts (ex: plotbands

If is not possible, can i at least override the drawing splitArea ?

i propose the splitarea to have something like this

 splitArea : [
            {
                start: 1,
                end: 10,
                color: "red"
            },
            {
                start: 10,
                end: 20,
                color: "blue",
            }
        ];

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
bogdanSantacommented, Feb 22, 2018

I made some workaround it works but i don’t like it for each color i need to create a empty series containing only mark Area
with the mention the serie name must be unique

series: [

         name:'randomx',
      type: 'bar',
         markArea: {
              itemStyle: {
                  normal: {
                      color: 'red'
                   },`

              }, 
              data: [
                  [ {yAxis: 0 }, { yAxis: 10000 }],
              ]
          }
          
      },
      {  
         name:'randomy',
      type: 'bar',
         markArea: {
              itemStyle: {
                  normal: {
                      color: 'green'
                   },

              },
              data: [
                  [ {yAxis: 10000 }, { yAxis: 200000 }],
              ]
          }
      }  
      ,{
      name: 'scatter',
      type: 'scatter',
      label: {
          emphasis: {
              show: true,
              position: 'left',
              textStyle: {
                  color: 'blue',
                  fontSize: 16
              }
          }
      },
      data: [1,2,3,4,4,5,6,6]
 }
]
2reactions
Oviliacommented, Feb 22, 2018

Try with markArea

Read more comments on GitHub >

github_iconTop Results From Across the Web

apache/echarts - set SplitArea specific interval color - GitHub
I want to color yaxis from value x to y with some color,I used splitArea but is no use to me because is...
Read more >
echarts yaxis splitArea interval - Stack Overflow
I want to color yaxis from value x to y with some color, ... me because is a splitArea is a repeater, repeats...
Read more >
splitArea Operation
Using splitArea, all the lots are yellow because the block is divided into equal area lots. In comparison, when using the split operation,...
Read more >
Color Interval Definition (Enhanced)
To change the colors on the enhanced Color bar, select a color from the palette and then select a specific interval.
Read more >
California VitalPro User's Guide ICD-10 Underlying Cause ...
safeguard or delete the information that would identify the individual, ... use, select a color palette, set the range type (eg, "equal interval"), ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found