CODEWITHSUNDEEP
angularjshighcharts
Aanchal
Aanchal

Reputation: 173

Not able to align highchart made using angular js

I have created a highchart using highchart-ng directive of angular js. My isuue is that I am not able to align legends of my chart to extreme right of the chart.

The below code is not working for me-

     legend:{
     align: 'right',
     verticalAlign: 'right',
     floating: true        
},

I have created a plunker here- https://plnkr.co/edit/rd7r9CfZ6a9jCHHpS0ct?p=preview

Can somebody help me in aligning legends to the right of chart?

Upvotes: 0

Views: 83

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

You need to add under plotOptions

 options: {
      plotOptions: {
        pie: {
          borderColor: '#000000',
          size: 200,
          dataLabels: {
            enabled: true,
            distance: -30,
            style: {
              fontWeight: 'bold',
              color: 'white',
              textShadow: '0px 1px 2px black',

            }

          },
          startAngle: -180,
          endAngle: 180,
          center: ['50%', '55%']
        }
      },
      colors: ["#A6BCB0", "#EDA900", "#D2691E", "#00FFFF", "#9966CC"],
      chart: {
        type: 'pie',
        backgroundColor: '#f1f1f2',
        height: 400
      },
       legend: {
            align: 'right',
            verticalAlign: 'right',
            layout: 'vertical',
            x: 0,
            y: 160
        }
    }

Working Code

Upvotes: 1

Related Questions