Invert graph legends order. (#532)
* Invert graph legends order. * Reorder graph legends if inverted-graph is true.
This commit is contained in:
		
							parent
							
								
									d055fabfeb
								
							
						
					
					
						commit
						4dcda2cf47
					
				@ -1,6 +1,11 @@
 | 
			
		||||
.ct-legend{
 | 
			
		||||
    top: 130px;
 | 
			
		||||
    display: flex;
 | 
			
		||||
    flex-direction: column-reverse;
 | 
			
		||||
    @media (min-width: 653px) {
 | 
			
		||||
        top: 90px;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
.ct-legend.inverted{
 | 
			
		||||
    flex-direction: column;
 | 
			
		||||
}
 | 
			
		||||
@ -367,6 +367,10 @@ Chartist.plugins.legend = function (options: any) {
 | 
			
		||||
        function createLegendElement() {
 | 
			
		||||
            const legendElement = document.createElement('ul');
 | 
			
		||||
            legendElement.className = 'ct-legend';
 | 
			
		||||
            const inverted = localStorage.getItem('inverted-graph') === 'true';
 | 
			
		||||
            if (inverted){
 | 
			
		||||
                legendElement.classList.add('inverted');
 | 
			
		||||
            }
 | 
			
		||||
            if (chart instanceof Chartist.Pie) {
 | 
			
		||||
                legendElement.classList.add('ct-legend-inside');
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
@ -69,6 +69,8 @@
 | 
			
		||||
}
 | 
			
		||||
:host ::ng-deep .ct-legend {
 | 
			
		||||
  top: 20px !important;
 | 
			
		||||
  display: flex;
 | 
			
		||||
  flex-direction: column-reverse;
 | 
			
		||||
  @media(min-height: 800px){
 | 
			
		||||
    padding-top: 40px !important;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user