Donut Chart with Range Palette | #rGhk9nEm

HTMLcopy

 
<div id="container"></div>

CSScopy

​x
 
html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    
}
​

JavaScriptAutocompletecopy

 
anychart.onDocumentReady(function () {
    // create pie chart with passed data
    var chart = anychart.pie ([
      
  {x: "Blanc", value: 3, code:"W96-8102",state:"selected",
    hovered: {
  
          hatchFill: {
                type: "forward-diagonal",
                color: "#ffffff",
                thickness: 20
             },
      outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
  },
  {x: 'Vanille', value:3, code:"W96-1103",state:"selected",
       hovered: {
  
          hatchFill: {
                type: "forward-diagonal",
                color: "#f5e6bb",
                thickness: 20
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
  },
  {x: 'Sable', value: 3, code:"W96-8861",state:"selected",
        hovered: {
  
          hatchFill: {
                type: "forward-diagonal",
                color: "#ecd3b4",
                thickness: 20
             },
       
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
  },
  {x: 'Gris galet', value:3, code:"W96-2171",state:"selected",
        hovered: {
  
          hatchFill: {
                type: "forward-diagonal",
                color: "#aeb2b3",
                thickness: 20
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
  },  
  {x: 'Gris béton', value: 3, code:"W96-2047",state:"selected",
          hovered: {
  
          hatchFill: {
                type: "forward-diagonal",
                color: "#63666f",
                thickness: 20
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
  },  
  
      {x: '* Disponible sur commande selon quantité', value: 1, code:"502-1013",
 
    hovered: {
  
          hatchFill: {
                type: "forward-diagonal",
                color: "#fdc98a",
                thickness: 20
             }
       }
​
  },
  {x: '* Disponible sur commande selon quantité', value: 1, code:"502-1125",
  
   hovered: {
     
          hatchFill: {
                type: "forward-diagonal",
                color: "#325966",
                thickness: 25
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
  }, 
      
  {x: '* Disponible sur commande selon quantité', value: 1, code:"502-1499",
 hovered: {
     
          hatchFill: {
                type: "forward-diagonal",
                color: "#bdc0c1",
                thickness: 25
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
  },
      
      
      
             {x: '* Disponible sur commande selon quantité', value: 1, code:"502-2012",
   hovered: {
          
          hatchFill: {
                type: "forward-diagonal",
                color: "#a99181",
                thickness: 25
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
             
             },
      
    
       {x: '* Disponible sur commande selon quantité ', value: 1, code:"502-2135",
 hovered: {
      
          hatchFill: {
                type: "forward-diagonal",
                color: "#c3b4ad",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
       },
                          {x: '* Disponible sur commande selon quantité', value: 1, code:"502-2136",
    hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#322f31",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
       
                          },
      
      
                               {x: '* Disponible sur commande selon quantité', value: 1, code:"502-2137",
    hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#65534a",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
                               },
                                     {x: '* Disponible sur commande selon quantité', value: 1, code:"502-2138",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#896f52",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
                                     },
                                                        {x: '* Disponible sur commande selon quantité', value: 1, code:"502-2141",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#b8978e",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },
                                                        {x: '* Disponible sur commande selon quantité', value: 1, code:"502-2144",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#d0d3dc",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },   
 
                                                        {x: '* Disponible sur commande selon quantité', value: 1, code:"502-2145",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#d8d39c",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },      
          {x: '* Disponible sur commande selon quantité', value: 1, code:"502-2148",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#73655b",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },
         {x: '* Disponible sur commande selon quantité', value: 1, code:"502-2149",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#4c5f57",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            }, 
         {x: '* Disponible sur commande selon quantité', value: 1, code:"502-2150",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#b55d62",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            }, 
         {x: '* Disponible sur commande selon quantité', value: 1, code:"502-2151",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#dfb1aa",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },
   {x: '* Disponible sur commande selon quantité', value: 1, code:"502-2156",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#335661",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },
   {x: '* Disponible sur commande selon quantité', value: 1, code:"502-2157",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#cbd038",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
   },    
   {x: '* Disponible sur commande selon quantité', value: 1, code:"502-2158",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#83927f",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },
      {x: '* Disponible sur commande selon quantité', value: 1, code:"502-2159",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#66a5ce",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },    
  {x: '* Disponible sur commande selon quantité', value: 1, code:"502-2160",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#00a2bd",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },
  {x: '* Disponible sur commande selon quantité', value: 1, code:"502-2161",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#005e86",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },
{x: '* Disponible sur commande selon quantité', value: 1, code:"502-2162",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#626269",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },   
{x: '* Disponible sur commande selon quantité', value: 1, code:"502-2163",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#aea0a4",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },
{x: '* Disponible sur commande selon quantité', value: 1, code:"502-2164",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#9796ae",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },
{x: '* Disponible sur commande selon quantité', value: 1, code:"502-2165",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#695268",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            }, 
{x: '* Disponible sur commande selon quantité', value: 1, code:"502-2166",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#fdbb48",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },
{x: '* Disponible sur commande selon quantité', value: 1, code:"502-2167",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#656b89",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },
{x: '* Disponible sur commande selon quantité', value: 1, code:"502-2168",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#a8a9ad",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },
{x: '* Disponible sur commande selon quantité', value: 1, code:"502-2171",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#babec3",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },
{x: '* Disponible sur commande selon quantité', value: 1, code:"502-2172",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#e6724b",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },
{x: '* Disponible sur commande selon quantité', value: 1, code:"502-2173",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#c27450",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },
{x: '* Disponible sur commande selon quantité', value: 1, code:"502-8056",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#00523e",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            }, 
{x: '* Disponible sur commande selon quantité', value: 1, code:"502-8204",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#f68740",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },   
{x: '* Disponible sur commande selon quantité', value: 1, code:"502-8255",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#aa5147",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },
{x: '* Disponible sur commande selon quantité', value: 1, code:"502-8284",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#634244",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },  
{x: '* Disponible sur commande selon quantité', value: 1, code:"502-8341",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#fff5d3",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },
{x: '* Disponible sur commande selon quantité', value: 1, code:"502-8450",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#5c5d5f",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            },
{x: '* Disponible sur commande selon quantité', value: 1, code:"502-8861",
hovered: {
           
          hatchFill: {
                type: "forward-diagonal",
                color: "#e7ccb5",
                thickness: 25,
           
             },
        outline: {
            enabled: false,
           
          }
       },
  
   selected:{
   outline: {
            enabled: false,
           
          }
   }
            }       
    ]);
​
​
  
  // configure the states of the chart
​
  chart.normal().stroke("#f9c975", 0);
  chart.hovered().stroke("#f9c975", 6);
  chart.normal().explode("0%");
  chart.hovered().explode("5%");
  
  
   // set tooltip text template
  var tooltip = chart.tooltip();
  // tooltip padding for all series on a chart
  chart.tooltip().padding().left(20);
  tooltip.format("{%x}");
  tooltip.format("Référence {%code} PVC Serge Ferrari");
​
  
​
​
    // create range color palette with color ranged between light blue and dark blue
    var palette = anychart.palettes.rangeColors();
    palette.items([
       {color: '#ffffff'}, //blanc
       {color: '#f5e6bb'}, //vanille
       {color: '#ecd3b4'},  //sable
       {color: '#aeb2b3'}, //gris-galet
       {color: '#63666f'}, //gris-béton
       {color: '#fdc98a'}, //Ref 502-1013
       {color: '#325966'}, //Ref 502-1125
      {color: '#bdc0c1'},  //Ref 502-1499
      {color: '#a99181'},  //Ref 502-2012
      {color: '#c3b4ad'},  //Ref 502-2135
      {color: '#322f31'},  //Ref 502-2136
      {color: '#65534a'},  //Ref 502-2137
      {color: '#896f52'},  //Ref 502-2138
      {color: '#b8978e'},  //Ref 502-2141
      {color: '#d0d3dc'},  //Ref 502-2144
      {color: '#d8d39c'},  //Ref 502-2145
      {color: '#73655b'},  //Ref 502-2148
      {color: '#4c5f57'},  //Ref 502-2149
      {color: '#b55d62'},  //Ref 502-2150
      {color: '#dfb1aa'},  //Ref 502-2151
      {color: '#335661'},  //Ref 502-2156
      {color: '#cbd038'},  //Ref 502-2157
      {color: '#83927f'},  //Ref 502-2158
      {color: '#66a5ce'},  //Ref 502-2159
      {color: '#00a2bd'},  //Ref 502-2160
      {color: '#005e86'},  //Ref 502-2161
      {color: '#626269'},  //Ref 502-2162
      {color: '#aea0a4'},  //Ref 502-2163
      {color: '#9796ae'},  //Ref 502-2164
      {color: '#695268'},  //Ref 502-2165
      {color: '#fdbb48'},  //Ref 502-2166
      {color: '#656b89'},  //Ref 502-2167
      {color: '#a8a9ad'},  //Ref 502-2168
      {color: '#babec3'},  //Ref 502-2171
      {color: '#e6724b'},  //Ref 502-2172
      {color: '#c27450'},  //Ref 502-2173
      {color: '#00523e'},  //Ref 502-8056
      {color: '#f68740'},  //Ref 502-8204
      {color: '#aa5147'},  //Ref 502-8255
      {color: '#634244'},  //Ref 502-8284
      {color: '#fff5d3'},  //Ref 502-8341
      {color: '#5c5d5f'},  //Ref 502-8450
      {color: '#e7ccb5'}   //Ref 502-8861
    ]);
  // set the explosion range
  chart.explode("5%");
​
​
  
    // set chart title text settings
    chart.title('')
            //set chart radius
            .innerRadius('30%')
            // set palette to the chart
            .palette(palette);
​
    // disable labels
    chart.labels(false);
​
     var background = chart.background();
​
    // Set fill.
    background.fill( '#424242',0);
  
    // set container id for the chart
    chart.container('container');
    // initiate chart drawing
    chart.draw();
});

Sample meta

AnyChart Documentation

ASYNC Rendering (Common Settings)

Column Chart (3D)

Drawing (Drawing Tools and Annotations)

Overview (3D)

Title (Common Settings)