How can I cause a legend to appear to the right of the pie (Chart.JS)?

Question

I\'m creating a fairly simple pie chart with Chart.JS like so:

var data = {
    labels: [
        \"Bananas (18%)\",
        \"Lettuce, Romaine (14%)\",
                 


        

Answer 1

You have to turn the default legend off in the options first with:

legend: {
        display: false
},

Also your id selector for your legend was wrong. Fiddle.

Wrap the chart in the

and set the height and width of that since the canvas will be responsive to its container, then set the canvas's div and the legend's div as display:inline-block.

HTML

CSS

 #kpi{
      height: 400px;
      width: 100%;
      border: 1px solid black;
      background-color: white;
    }
    .pieLegend li span {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 5px;
    }

    #top10Legend {
      display: inline-block;
    }

    #container {
      display: inline-block;
      height: 50%;
      width: 50%;
    }

    #top10Legend>ul{
      list-style:none;
    }

0 讨论(0)

查看其它2个回答

发布评论:

提交评论

---

•  加载中...