How to make legend side-by-side with chart

How to make legend side-by-side with chart

  

Dear all

It is a bug?

I have change the title to [How can I show the number on the Staked Bar]

but it still display [How to make legend side-by-side with chart]

Question:

How can I show the number on the Staked Bar?

This is Specification Document:


Thanks.



Solution

Have you tried

legend: {
        layout: 'vertical',  
        align: 'right',
        verticalAlign: 'middle'  
  }

In your charts property there is "AdvancedFormat".  In the AdvancedFormat you need to write a function AdvancedFormat_Init ... As a sample you can see the format here...

AdvancedFormat_Init(DataPointFormats:,DataSeriesFormats:,XAxisJSON:,YAxisJSON:,HighchartsJSON:     " chart: {      
    //marginTop:100,      
     zoomType: 'none'    }, 

     series: [ {       

                    type: 'column',       

                   color: 'green',yAxis: 1, },

                 {       

                  type: 'column',       

                  color: 'red',yAxis: 1,  },     

               {        type: 'line',    color: 'blue',    }],

yAxis: [{ // Primary yAxis       

                  tickPositions: [0, 1, 2, 3, 4],      

                labels: {     style: {            color: Highcharts.getOptions().colors[0]  }  }, 

                    title: {            text: '',            style: {                color: Highcharts.getOptions().colors[0]   }  }  },   

            { // Secondary yAxis              

                  tickPositions: [-4,-3,-2,-1,0,1, 2, 3,4],

            labels: {     style: {            color: Highcharts.getOptions().colors[0] } },    

                   title: {            text: '',          

                  style: {                color: Highcharts.getOptions().colors[0]  }},opposite: true    }],     

              legend: {        

                           layout: 'vertical',      

                             align: 'right',       

                  verticalAlign: 'middle'    },"
)

you can see a live demo in following link just by changing the legend properties to:
 legend: {
        layout: 'vertical',  
        align: 'right',
        verticalAlign: 'middle'  
  }

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-stacked/

As Outsystems charts uses Highcharts , so you can look at https://api.highcharts.com/highcharts/ 

Solution

Hi,Khandakar

Thanks for your answer.

I'm so sorry to forget update the title.

I have understood that side-by-side should be made by legend.align.

Now I want to know how to show the number on the staked bar looks like the picture



wang zhijin wrote:

Hi,Khandakar

Thanks for your answer.

I'm so sorry to forget update the title.

I have understood that side-by-side should be made by legend.align.

Now I want to know how to show the number on the staked bar looks like the picture




Yeah....i can see that...
but still you can find your current question's solution by looking here how it can be done...

plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    }

Khandakar Tareq wrote:

Yeah....i can see that...
but still you can find your current question's solution by looking here how it can be done...

plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    }

Thank you very much.

I got it!