Home forums Using CanvasJS Mirror chart

This topic contains 4 replies, has 2 voices, and was last updated by  ttquang1063750 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #23441

    I want to create a chart like the one below to represent two types of data that are opposite

    
    60 - |
         |
    30 - |      _
         |     | |
     0 - |------------------------------------
         |         |_|
    30 - |         
         |
    60 - |
    
    

    mirror chart
    is it possible or not?

    #23445

    Vishwas R
    Keymaster

    @ttquang1063750,

    You can use Stacked Column Chart to achieve this. Please take a look at this JSFiddle.


    Vishwas R
    Team CanvasJS

    #23455

    Hi @vishwas R,
    It seems your chart render the data two sides the upside render for the positive value and the downside render for the negative value. With me, I want the chart render are both upside and downside for the positive value like this jJSFiddle , but it like a cheating and when I have hidden the income bar then the chart looks ugly. Do we have any feature for implement this one?

    #23471

    Vishwas R
    Keymaster

    @ttquang1063750,

    It seems your chart render the data two sides the upside render for the positive value and the downside render for the negative value.

    Theoretically, negative values should be rendered below 0 and positive above 0. To make it look like even the negative values are positive, the work-around you are using seems to be a better option.

    when I have hidden the income bar then the chart looks ugly.

    To retain the range of the axis even after hiding the dataSeries, you can set axis minimum and maximum as shown in this updated JSFiddle.


    Vishwas R
    Team CanvasJS

    #23479

    Thank @vishwas
    Your solution is the best for me.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.