[GitHub] [echarts] yousefwalid commented on issue #16056: Add the ability to add different colors in different segments to a single specific series

[GitBox]

yousefwalid commented on issue #16056:
URL: https://github.com/apache/echarts/issues/16056#issuecomment-966880970


   @pissang I don't think this is relevant to my request
   Let me clarify the problem here a bit.
   
   --
   
   Assume we have this chart
   ```js
   option = {
       xAxis: {
           type: 'value',
       },
       yAxis: {
           type: 'value'
       },
       series: [
           {
               data: [[1,1], [2,3], [4,5], [5,10]],
               type: 'line',
               lineStyle: {
                   color: 'red'
               }
           }, 
           {
               data: [[1,4], [2,6], [4,9], [5,12]],
               type: 'line',
               lineStyle: {
                   color: 'blue'
               }
           }
       ]
   };
   ```
   This produces this output, where there is one series with red line color and 
another series with blue line color
   
![image](https://user-images.githubusercontent.com/40529934/141425514-c0a29f66-08d4-4226-b15f-37deae634e9d.png)
   
   The behavior I want to produce is allowing to change the color of each 
section of the line, so for instance, something like this:
   
   ```js
   option = {
       xAxis: {
           type: 'value',
       },
       yAxis: {
           type: 'value'
       },
       series: [
           {
               data: [
                   {
                       value: [1,1],
                       lineStyle: {
                           color: 'green'
                       }
                   },
                   {
                       value: [2,3],
                       lineStyle: {
                           color: 'red'
                       }
                   },
                   {
                       value: [4,5],
                       lineStyle: {
                           color: 'green'
                       }
                   },
                   {
                       value: [5,10]
                   }
               ],
               type: 'line'
           }, 
           {
               data: [[1,4], [2,6], [4,9], [5,12]],
               type: 'line',
               lineStyle: {
                   color: 'blue'
               }
           }
       ]
   };
   ```
   
   would produce the following chart
   
![Untitled-1](https://user-images.githubusercontent.com/40529934/141426491-3687d7f6-a617-4c5e-89c3-f3b186c0aa68.jpg)
   
   where one line has first section in green, second in red, third in green, 
but the other line is unaffected.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org