[{"data":1,"prerenderedAt":809},["ShallowReactive",2],{"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fgraphiques":3,"section:\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fgraphiques":808},{"id":4,"title":5,"body":6,"description":794,"extension":795,"meta":796,"navigation":797,"path":804,"seo":805,"stem":806,"__hash__":807},"docs\u002F2.next\u002F3.dodock\u002F10.developpeurs\u002Fgraphiques.md","Dessiner des graphiques dans le bureau",{"type":7,"value":8,"toc":787},"minimark",[9,13,26,30,83,117,122,172,175,384,387,393,397,434,437,520,523,527,534,726,746,752,756,770,774,783],[10,11,5],"h1",{"id":12},"dessiner-des-graphiques-dans-le-bureau",[14,15,16,17,21,22,25],"p",{},"Le bureau dessine ses graphiques et ses cartes de nombres avec les composants graphiques de frappe-ui, via l'îlot ",[18,19,20],"code",{},"frappe.chart",". ",[18,23,24],{},"frappe.ui.chart"," accepte une configuration frappe-charts (l'ancien format) ou une configuration frappe-ui ; une configuration frappe-charts est convertie automatiquement, les applications n'ont rien à changer.",[27,28,24],"h2",{"id":29},"frappeuichart",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const chart = frappe.ui.chart(element, config);\n","js","",[18,38,39],{"__ignoreMap":36},[40,41,44,48,52,56,59,62,65,67,71,74,77,80],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"spNyl","const",[40,49,51],{"class":50},"sTEyZ"," chart ",[40,53,55],{"class":54},"sMK4o","=",[40,57,58],{"class":50}," frappe",[40,60,61],{"class":54},".",[40,63,64],{"class":50},"ui",[40,66,61],{"class":54},[40,68,70],{"class":69},"s2Zo4","chart",[40,72,73],{"class":50},"(element",[40,75,76],{"class":54},",",[40,78,79],{"class":50}," config)",[40,81,82],{"class":54},";\n",[84,85,86,107],"ul",{},[87,88,89,90,93,94,98,99,102,103,106],"li",{},"Si ",[18,91,92],{},"config"," est une configuration frappe-charts et que la case ",[95,96,97],"strong",{},"Utiliser les graphiques classiques"," est cochée dans les ",[95,100,101],{},"Paramètres Système"," (lue avec ",[18,104,105],{},"frappe.defaults.is_enabled(\"use_classic_charts\")","), le graphique est dessiné avec frappe-charts, comme avant.",[87,108,109,110,113,114,61],{},"Sinon, le bureau monte l'îlot : ",[18,111,112],{},"frappe.ui.mount_island(\"frappe.chart\", element, { config })",". Une configuration frappe-charts passe d'abord par ",[18,115,116],{},"from_legacy_config()",[14,118,119,121],{},[18,120,24],{}," renvoie tout de suite une poignée :",[123,124,125,138],"table",{},[126,127,128],"thead",{},[129,130,131,135],"tr",{},[132,133,134],"th",{},"Membre",[132,136,137],{},"Rôle",[139,140,141,152,162],"tbody",{},[129,142,143,149],{},[144,145,146],"td",{},[18,147,148],{},"update(config)",[144,150,151],{},"Redessine avec une nouvelle configuration.",[129,153,154,159],{},[144,155,156],{},[18,157,158],{},"destroy()",[144,160,161],{},"Libère le graphique : démonte l'îlot ou détruit l'instance frappe-charts.",[129,163,164,169],{},[144,165,166],{},[18,167,168],{},"ready",[144,170,171],{},"Promesse résolue quand le graphique est dessiné.",[14,173,174],{},"Avec le rendu classique, la poignée est l'instance frappe-charts elle-même.",[31,176,178],{"className":33,"code":177,"language":35,"meta":36,"style":36},"const chart = frappe.ui.chart(wrapper, {\n    type: \"bar\",\n    data: {\n        labels: [\"Janv.\", \"Févr.\", \"Mars\"],\n        datasets: [{ name: __(\"Ventes\"), values: [12000, 15400, 9800] }],\n    },\n    barOptions: { horizontal: 1 },\n});\n",[18,179,180,206,229,239,280,347,353,375],{"__ignoreMap":36},[40,181,182,184,186,188,190,192,194,196,198,201,203],{"class":42,"line":43},[40,183,47],{"class":46},[40,185,51],{"class":50},[40,187,55],{"class":54},[40,189,58],{"class":50},[40,191,61],{"class":54},[40,193,64],{"class":50},[40,195,61],{"class":54},[40,197,70],{"class":69},[40,199,200],{"class":50},"(wrapper",[40,202,76],{"class":54},[40,204,205],{"class":54}," {\n",[40,207,209,213,216,219,223,226],{"class":42,"line":208},2,[40,210,212],{"class":211},"swJcz","    type",[40,214,215],{"class":54},":",[40,217,218],{"class":54}," \"",[40,220,222],{"class":221},"sfazB","bar",[40,224,225],{"class":54},"\"",[40,227,228],{"class":54},",\n",[40,230,232,235,237],{"class":42,"line":231},3,[40,233,234],{"class":211},"    data",[40,236,215],{"class":54},[40,238,205],{"class":54},[40,240,242,245,247,250,252,255,257,259,261,264,266,268,270,273,275,278],{"class":42,"line":241},4,[40,243,244],{"class":211},"        labels",[40,246,215],{"class":54},[40,248,249],{"class":50}," [",[40,251,225],{"class":54},[40,253,254],{"class":221},"Janv.",[40,256,225],{"class":54},[40,258,76],{"class":54},[40,260,218],{"class":54},[40,262,263],{"class":221},"Févr.",[40,265,225],{"class":54},[40,267,76],{"class":54},[40,269,218],{"class":54},[40,271,272],{"class":221},"Mars",[40,274,225],{"class":54},[40,276,277],{"class":50},"]",[40,279,228],{"class":54},[40,281,283,286,288,290,293,296,298,301,304,306,309,311,314,316,319,321,323,327,329,332,334,337,340,343,345],{"class":42,"line":282},5,[40,284,285],{"class":211},"        datasets",[40,287,215],{"class":54},[40,289,249],{"class":50},[40,291,292],{"class":54},"{",[40,294,295],{"class":211}," name",[40,297,215],{"class":54},[40,299,300],{"class":69}," __",[40,302,303],{"class":50},"(",[40,305,225],{"class":54},[40,307,308],{"class":221},"Ventes",[40,310,225],{"class":54},[40,312,313],{"class":50},")",[40,315,76],{"class":54},[40,317,318],{"class":211}," values",[40,320,215],{"class":54},[40,322,249],{"class":50},[40,324,326],{"class":325},"sbssI","12000",[40,328,76],{"class":54},[40,330,331],{"class":325}," 15400",[40,333,76],{"class":54},[40,335,336],{"class":325}," 9800",[40,338,339],{"class":50},"] ",[40,341,342],{"class":54},"}",[40,344,277],{"class":50},[40,346,228],{"class":54},[40,348,350],{"class":42,"line":349},6,[40,351,352],{"class":54},"    },\n",[40,354,356,359,361,364,367,369,372],{"class":42,"line":355},7,[40,357,358],{"class":211},"    barOptions",[40,360,215],{"class":54},[40,362,363],{"class":54}," {",[40,365,366],{"class":211}," horizontal",[40,368,215],{"class":54},[40,370,371],{"class":325}," 1",[40,373,374],{"class":54}," },\n",[40,376,378,380,382],{"class":42,"line":377},8,[40,379,342],{"class":54},[40,381,313],{"class":50},[40,383,82],{"class":54},[14,385,386],{},"Exemple fictif : une configuration frappe-charts, convertie automatiquement.",[14,388,389,392],{},[18,390,391],{},"frappe.ui.chart.is_classic(config)"," indique si une configuration sera dessinée avec le rendu classique.",[27,394,396],{"id":395},"types-de-lîlot-frappechart","Types de l'îlot frappe.chart",[14,398,399,400,402,403,402,405,402,408,402,411,402,414,402,417,402,420,402,423,402,426,429,430,433],{},"L'îlot dessine les types ",[18,401,222],{},", ",[18,404,42],{},[18,406,407],{},"area",[18,409,410],{},"donut",[18,412,413],{},"funnel",[18,415,416],{},"heatmap",[18,418,419],{},"calendar-heatmap",[18,421,422],{},"percentage-bar",[18,424,425],{},"sankey",[18,427,428],{},"scatter"," et ",[18,431,432],{},"number"," (carte de nombres).",[14,435,436],{},"Une configuration frappe-charts est convertie en :",[123,438,439,452],{},[126,440,441],{},[129,442,443,446,449],{},[132,444,445],{},"Type frappe-charts",[132,447,448],{},"Type frappe-ui",[132,450,451],{},"Particularités",[139,453,454,477,493,507],{},[129,455,456,465,474],{},[144,457,458,402,460,402,462],{},[18,459,222],{},[18,461,42],{},[18,463,464],{},"axis-mixed",[144,466,467,402,469,471,472],{},[18,468,222],{},[18,470,42],{}," ou ",[18,473,407],{},[144,475,476],{},"graphique à axes",[129,478,479,486,490],{},[144,480,481,402,484],{},[18,482,483],{},"pie",[18,485,410],{},[144,487,488],{},[18,489,410],{},[144,491,492],{},"libellé « Total » au centre",[129,494,495,500,504],{},[144,496,497],{},[18,498,499],{},"percentage",[144,501,502],{},[18,503,422],{},[144,505,506],{},"une seule barre, la légende dessous",[129,508,509,513,517],{},[144,510,511],{},[18,512,416],{},[144,514,515],{},[18,516,419],{},[144,518,519],{},"calendrier sur l'année glissante",[14,521,522],{},"Un type inconnu affiche un message d'erreur dans la zone du graphique.",[27,524,526],{"id":525},"règles-de-conversion-de-lancien-format","Règles de conversion de l'ancien format",[14,528,529,530,533],{},"L'adaptateur (",[18,531,532],{},"frappe\u002Fpublic\u002Fjs\u002Ffrappe\u002Fui\u002Fisland\u002Fchart\u002Flegacy_config.js",") applique les comportements de frappe-charts :",[84,535,536,546,556,648,666,703,720],{},[87,537,538,541,542,545],{},[95,539,540],{},"Hauteur"," : 240 px quand la configuration ne précise pas ",[18,543,544],{},"height",", sauf pour les cartes de nombres et les barres de pourcentage, dimensionnées sur leur contenu.",[87,547,548,551,552,555],{},[95,549,550],{},"Tranches"," : au-delà de 20 tranches (",[18,553,554],{},"maxSlices","), les tranches restantes sont regroupées dans une tranche grise « Others » ; les couleurs sont indexées par libellé, pas par position.",[87,557,558,561,562,402,565,402,568,402,571,402,574,402,577,402,580,402,583,402,586,402,589,402,592,402,595,402,598,402,601,402,604,402,607,402,610,402,613,402,616,402,619,622,623,626,627,630,631,429,634,630,637,640,641,429,644,647],{},[95,559,560],{},"Couleurs"," : les noms ",[18,563,564],{},"blue",[18,566,567],{},"light-blue",[18,569,570],{},"cyan",[18,572,573],{},"light-cyan",[18,575,576],{},"green",[18,578,579],{},"teal",[18,581,582],{},"light-green",[18,584,585],{},"light-teal",[18,587,588],{},"purple",[18,590,591],{},"violet",[18,593,594],{},"light-purple",[18,596,597],{},"light-violet",[18,599,600],{},"orange",[18,602,603],{},"light-orange",[18,605,606],{},"yellow",[18,608,609],{},"light-yellow",[18,611,612],{},"red",[18,614,615],{},"light-red",[18,617,618],{},"pink",[18,620,621],{},"light-pink"," deviennent des jetons ",[18,624,625],{},"var(--chart-categorical-N)"," ; ",[18,628,629],{},"grey","\u002F",[18,632,633],{},"gray",[18,635,636],{},"light-grey",[18,638,639],{},"light-gray"," deviennent ",[18,642,643],{},"var(--ink-gray-4)",[18,645,646],{},"var(--ink-gray-2)",". Les autres valeurs (codes couleur) sont conservées.",[87,649,650,653,654,657,658,661,662,665],{},[95,651,652],{},"Axes"," : ",[18,655,656],{},"data.dates"," (une date ISO par libellé) place le graphique sur un axe temporel — le serveur des graphiques de tableau de bord envoie ",[18,659,660],{},"dates",", le premier jour de chaque période. ",[18,663,664],{},"axisOptions.xIsSeries"," conserve les libellés comme axe de séries ; sinon l'axe est positionnel et le libellé est affiché par position.",[87,667,668,653,671,674,675,678,679,682,683,686,687,690,691,694,695,698,699,702],{},[95,669,670],{},"Séries",[18,672,673],{},"chartType"," (ou ",[18,676,677],{},"type",") par jeu de données choisit la marque ; ",[18,680,681],{},"lineOptions.regionFill"," dessine une aire, ",[18,684,685],{},"lineOptions.spline"," lisse la courbe, ",[18,688,689],{},"valuesOverPoints"," affiche les valeurs sur les points, ",[18,692,693],{},"data.yMarkers"," devient des lignes de référence, ",[18,696,697],{},"barOptions.stacked"," empile les barres et ",[18,700,701],{},"barOptions.horizontal"," les oriente à l'horizontale.",[87,704,705,708,709,674,712,715,716,719],{},[95,706,707],{},"Heatmap"," : les clés en secondes Unix sont lues dans le fuseau horaire du navigateur ; sans plage, l'année glissante jusqu'à aujourd'hui est dessinée ; ",[18,710,711],{},"countLabel",[18,713,714],{},"count_label",") nomme la valeur ; ",[18,717,718],{},"colors"," devient la palette.",[87,721,722,725],{},[95,723,724],{},"Valeurs"," : pour un donut ou une barre de pourcentage, les jeux de données sont additionnés par libellé ; une valeur nulle reste un creux, une valeur non numérique compte pour 0.",[14,727,728,729,402,732,402,735,429,738,741,742,745],{},"Les valeurs sont formatées comme le bureau formate un champ : ",[18,730,731],{},"fieldtype",[18,733,734],{},"options",[18,736,737],{},"precision",[18,739,740],{},"currency"," sont pris en compte, et les graduations d'axe sont abrégées (un axe en ",[18,743,744],{},"Currency"," conserve son symbole).",[14,747,748,749,61],{},"En mode développeur, une option frappe-charts que le nouveau rendu ne dessine pas est signalée une fois par page dans la console : ",[18,750,751],{},"frappe.ui.chart: \"\u003Cclé>\" is a frappe-charts option the new charts do not draw",[27,753,755],{"id":754},"api-dépréciées","API dépréciées",[14,757,758,402,761,429,764,767,768,61],{},[18,759,760],{},"frappe.Chart",[18,762,763],{},"frappe.utils.make_chart",[18,765,766],{},"frappe.ui.RealtimeChart"," dessinent toujours avec frappe-charts et sont dépréciées : elles affichent un avertissement une fois par page. Préférez ",[18,769,24],{},[27,771,773],{"id":772},"construction","Construction",[14,775,776,779,780,782],{},[18,777,778],{},"bench build"," construit les îlots de page du framework, dont l'îlot ",[18,781,20],{}," : aucun asset supplémentaire à livrer pour dessiner un graphique dans le bureau.",[784,785,786],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":36,"searchDepth":43,"depth":208,"links":788},[789,790,791,792,793],{"id":29,"depth":208,"text":24},{"id":395,"depth":208,"text":396},{"id":525,"depth":208,"text":526},{"id":754,"depth":208,"text":755},{"id":772,"depth":208,"text":773},"Dessiner un graphique dans le bureau avec frappe.ui.chart, l'îlot frappe.chart et la conversion des configurations frappe-charts.","md",{"reviewed":797,"last_verified":798,"sources":799},true,"2026-11-04",[800,801,802,803],"dodock@develop:frappe\u002Fpublic\u002Fjs\u002Ffrappe\u002Fui\u002Fchart.js","dodock@develop:frappe\u002Fpublic\u002Fjs\u002Ffrappe\u002Fui\u002Fisland\u002Fchart\u002Flegacy_config.js","dodock@develop:frappe\u002Fpublic\u002Fjs\u002Ffrappe\u002Fui\u002Fisland\u002Fchart\u002Fchart.vue","dodock@develop:frappe\u002Fcore\u002Fdoctype\u002Fsystem_settings\u002Fsystem_settings.json","\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fgraphiques",{"title":5,"description":794},"2.next\u002F3.dodock\u002F10.developpeurs\u002Fgraphiques","-Ov3QS8NYAIK_fbiJ8l-1ajVMaeS7hnj2Y7Rp5pckrI",{},1793871744322]