title: Python & Plotly: custom colors to pie chart via dictionary
body: <p>I'm creating reporting engine and i'm struggling to get customization work as i want to. I have data which contains criticalities from 1-10 and i'd like to have it so that in pie, the rating 10 allways gets red color, rating 9 orange and so on..</p>
  
  <p>My current code is following:</p>
  
  <pre><code>#!/usr/bin/env python
  # -*- coding: utf-8 -*-
  
  import plotly.plotly as py
  import plotly.graph_objs as go
  import plotly.figure_factory as FF
  
  import numpy as np
  import pandas as pd
  
  crit = [1, 10, 2, 6, 1, 2, 2, 3, 1, 4, 6, 6, 9, 10, 5, 8, 3, 8, 5, 4, 9, 2, 8, 7, 1, 1, 7, 3, 9, 9, 6, 6, 8, 9, 6, 7, 5, 9, 8, 4, 4, 5, 6, 2, 9, 9, 4, 6, 9, 9]
  
  fig = {
    "data": [
      {
        "values": crit,
        "labels": crit,
        "domain": {"x": [0, .48]},
        "name": "Criticality",
        "marker": {'colors': [
                       '#e6f2ff',
                       '#99ccff',
                       '#ccccff',
                       '#cc99ff',
                       '#ff99ff',
                       '#ff6699',
                       '#ff9966',
                       '#ff6600',
                       '#ff5050',
                       '#ff0000'
                      ]
                  },
        "textinfo":"percent+label",
        "textfont": {'color': '#FFFFFF', 'size': 15},
        "hole": .4,
        "type": "pie"
      } ],
      "layout": {
          "title":"Criticalities",
          "annotations": [
              {
                  "font": {
                      "size": 25,
                      "color": '#5A5A5A'
                  },
                  "showarrow": False,
                  "text": "2018",
                  "x": 0.20,
                  "y": 0.5
              }
          ]
      }
  }
  
  
  
  py.iplot(fig, filename='pie-custom-colors')
  </code></pre>
  
  <p>but this results as with following diagram:</p>
  
  <p><a href="https://i.stack.imgur.com/bBKaR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bBKaR.png" alt="graph"></a></p>
  
  <p>Is there a way to map these colors based on a dictonary like:</p>
  
  <pre><code>colors = { 
  '10':'#ff0000'
  '9':'#ff5050'
  etc.. }
  </code></pre>
  
  <p>Bonus question: Is there way to sort the icons on right side as well from 10->1</p>