Skip to content

Commit 946aaf1

Browse files
ianrobertsianroberts
committed
Plotly v3 - title attribute changes
- remove deprecated titlefont, titleside, etc. - it is no longer valid to pass a plain string as "title" plotly/plotly.js#7212
1 parent 6b5b307 commit 946aaf1

3 files changed

Lines changed: 92 additions & 52 deletions

File tree

‎types/plotly.js/index.d.ts‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -409,26 +409,23 @@ export function animate(
409409
// Layout
410410
export interface Layout {
411411
colorway: string[];
412-
title:
413-
| string
414-
| Partial<{
415-
text: string;
416-
font: Partial<Font>;
417-
xref: "container" | "paper";
418-
yref: "container" | "paper";
419-
x: number;
420-
y: number;
421-
xanchor: "auto" | "left" | "center" | "right";
422-
yanchor: "auto" | "top" | "middle" | "bottom";
423-
pad: Partial<Padding>;
424-
subtitle:
425-
| string
426-
| Partial<{
427-
text: string;
428-
font: Partial<Font>;
429-
}>;
430-
}>;
431-
titlefont: Partial<Font>;
412+
title: Partial<{
413+
text: string;
414+
font: Partial<Font>;
415+
xref: "container" | "paper";
416+
yref: "container" | "paper";
417+
x: number;
418+
y: number;
419+
xanchor: "auto" | "left" | "center" | "right";
420+
yanchor: "auto" | "top" | "middle" | "bottom";
421+
pad: Partial<Padding>;
422+
subtitle:
423+
| string
424+
| Partial<{
425+
text: string;
426+
font: Partial<Font>;
427+
}>;
428+
}>;
432429
autosize: boolean;
433430
showlegend: boolean;
434431
paper_bgcolor: Color;
@@ -460,6 +457,12 @@ export interface Layout {
460457
hoverdistance: number;
461458
hoverlabel: Partial<HoverLabel>;
462459
calendar: Calendar;
460+
461+
// these are just the most common nested property updates that you might
462+
// want to pass to Plotly.relayout - *any* dotted property path through the
463+
// normal nested structure is valid here, and enumerating them all including
464+
// all possible [n] array indices would be infeasible (if it weren't for the
465+
// array indices, the pure a.b.c bit might be doable with conditional types)
463466
"xaxis.range": [Datum, Datum];
464467
"xaxis.range[0]": Datum;
465468
"xaxis.range[1]": Datum;
@@ -470,8 +473,8 @@ export interface Layout {
470473
"xaxis.type": AxisType;
471474
"xaxis.autorange": boolean;
472475
"yaxis.autorange": boolean;
473-
"xaxis.title": string;
474-
"yaxis.title": string;
476+
"xaxis.title": Partial<DataTitle>;
477+
"yaxis.title": Partial<DataTitle>;
475478
ternary: {}; // TODO
476479
geo: {}; // TODO
477480
mapbox: Partial<Mapbox>;
@@ -664,12 +667,7 @@ export interface Axis {
664667
* Individual pieces can override this.
665668
*/
666669
color: Color;
667-
title: string | Partial<DataTitle>;
668-
/**
669-
* Former `titlefont` is now the sub-attribute `font` of `title`.
670-
* To customize title font properties, please use `title.font` now.
671-
*/
672-
titlefont: Partial<Font>;
670+
title: Partial<DataTitle>;
673671
type: AxisType;
674672
autorange: true | false | "reversed" | "min reversed" | "max reversed" | "min" | "max";
675673
autorangeoptions: Partial<AutoRangeOptions>;
@@ -1591,6 +1589,12 @@ export interface Transform {
15911589
order: "ascending" | "descending";
15921590
}
15931591

1592+
export interface ColorBarTitle {
1593+
text: string;
1594+
font: Partial<Font>;
1595+
side: "right" | "top" | "bottom";
1596+
}
1597+
15941598
export interface ColorBar {
15951599
thicknessmode: "fraction" | "pixels";
15961600
thickness: number;
@@ -1630,9 +1634,7 @@ export interface ColorBar {
16301634
exponentformat: "none" | "e" | "E" | "power" | "SI" | "B";
16311635
showexponent: "all" | "first" | "last" | "none";
16321636
minexponent: number;
1633-
title: string;
1634-
titlefont: Font;
1635-
titleside: "right" | "top" | "bottom";
1637+
title: Partial<ColorBarTitle>;
16361638
tickvalssrc: any;
16371639
ticktextsrc: any;
16381640
}

‎types/plotly.js/test/core-tests.ts‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,17 @@ const layout = {
3636
subtitle: "Annual sales growth between 1999 and 2002",
3737
},
3838
xaxis: {
39-
title: "Year",
39+
title: {
40+
text: "Year",
41+
},
4042
showgrid: false,
4143
zeroline: false,
4244
tickangle,
4345
},
4446
yaxis: {
45-
title: "Percent",
47+
title: {
48+
text: "Percent",
49+
},
4650
showline: false,
4751
},
4852
uirevision: "true",
@@ -71,7 +75,7 @@ const layout = {
7175
opacity: 0.6,
7276
meanline: { visible: true },
7377
} as ViolinData;
74-
Plotly.newPlot(graphDiv, [violinTrace], { title: "Sales growth" });
78+
Plotly.newPlot(graphDiv, [violinTrace], { title: { text: "Sales growth" } });
7579

7680
const candlestickTrace: Partial<CandlestickData> = {
7781
x: [
@@ -247,7 +251,7 @@ const layout = {
247251
type: "candlestick",
248252
xaxis: "x",
249253
};
250-
Plotly.newPlot(graphDiv, [candlestickTrace], { title: "Stock price" });
254+
Plotly.newPlot(graphDiv, [candlestickTrace], { title: { text: "Stock price" } });
251255
})();
252256
(() => {
253257
const data: Array<Partial<SankeyData>> = [
@@ -272,7 +276,9 @@ const layout = {
272276
},
273277
];
274278
const layout = {
275-
title: "Basic Sankey",
279+
title: {
280+
text: "Basic Sankey",
281+
},
276282
font: {
277283
size: 10,
278284
},
@@ -289,7 +295,7 @@ const layout = {
289295
type: "scatter",
290296
} as ScatterData,
291297
];
292-
const layout2 = { title: "Revenue" };
298+
const layout2 = { title: { text: "Revenue" } };
293299
Plotly.newPlot(graphDiv, data2, layout2);
294300
})();
295301

@@ -424,7 +430,9 @@ const layout = {
424430
];
425431

426432
const layout = {
427-
title: "Global Emissions 1990-2011",
433+
title: {
434+
text: "Global Emissions 1990-2011",
435+
},
428436
annotations: [
429437
{
430438
font: {
@@ -612,7 +620,9 @@ const layout = {
612620
// update only values within nested objects
613621
(() => {
614622
const update: Partial<Layout> = {
615-
title: "some new title", // updates the title
623+
title: { // updates the title
624+
text: "some new title",
625+
},
616626
"xaxis.range": [0, 5], // updates the xaxis range
617627
"yaxis.range[1]": 15, // updates the end of the yaxis range
618628
};
@@ -624,7 +634,9 @@ const layout = {
624634
marker: { color: "red" },
625635
};
626636
const layout_update = {
627-
title: "some new title", // updates the title
637+
title: { // updates the title
638+
text: "some new title",
639+
},
628640
};
629641
Plotly.update(graphDiv, data_update, layout_update);
630642
})();
@@ -638,7 +650,9 @@ const layout = {
638650
type: "bar",
639651
};
640652
const layout_update: Partial<Layout> = {
641-
title: "some new title", // updates the title
653+
title: { // updates the title
654+
text: "some new title",
655+
},
642656
barmode: "stack",
643657
barnorm: "fraction",
644658
bargap: 0,

‎types/plotly.js/test/index-tests.ts‎

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -128,15 +128,21 @@ const graphDiv = "#test";
128128
} as PlotData;
129129
const data = [trace1, trace2, trace3];
130130
const layout = {
131-
title: "Gapminder",
131+
title: {
132+
text: "Gapminder",
133+
},
132134
xaxis: {
133-
title: "Life Expectancy",
135+
title: {
136+
text: "Life Expectancy",
137+
},
134138
domain: [0, 0.85],
135139
showgrid: false,
136140
zeroline: false,
137141
},
138142
yaxis: {
139-
title: "GDP per Cap",
143+
title: {
144+
text: "GDP per Cap",
145+
},
140146
showline: false,
141147
domain: [0, 0.85],
142148
showgrid: false,
@@ -165,7 +171,7 @@ const graphDiv = "#test";
165171
type: "scatter",
166172
} as PlotData,
167173
];
168-
const layout2 = { title: "Revenue" };
174+
const layout2 = { title: { text: "Revenue" } };
169175
Plotly.newPlot(graphDiv, data2, layout2);
170176
})();
171177
(() => {
@@ -313,7 +319,13 @@ const graphDiv = "#test";
313319
yanchor: "top",
314320
};
315321

316-
const layout: Partial<Layout> = { showlegend: true, title: "January 2013 Sales Report", template, modebar, legend };
322+
const layout: Partial<Layout> = {
323+
showlegend: true,
324+
title: { text: "January 2013 Sales Report" },
325+
template,
326+
modebar,
327+
legend,
328+
};
317329
const config: Partial<Config> = {
318330
modeBarButtons: [
319331
[
@@ -414,7 +426,9 @@ const graphDiv = "#test";
414426
},
415427
];
416428
const layout: Partial<Layout> = {
417-
title: "Grouped Box Plot",
429+
title: {
430+
text: "Grouped Box Plot",
431+
},
418432
boxmode: "overlay",
419433
};
420434

@@ -425,7 +439,9 @@ const graphDiv = "#test";
425439
const data: Array<Partial<PlotData>> = [
426440
{
427441
colorbar: {
428-
title: "Test",
442+
title: {
443+
text: "Test",
444+
},
429445
},
430446
locationmode: "ISO-3",
431447
locations: ["USA", "NLD"],
@@ -436,7 +452,9 @@ const graphDiv = "#test";
436452
];
437453
const layout: Partial<Layout> = {
438454
showlegend: true,
439-
title: "World Map",
455+
title: {
456+
text: "World Map",
457+
},
440458
geo: {
441459
projection: { type: "Mercator" },
442460
showcoastlines: true,
@@ -577,7 +595,9 @@ const graphDiv = "#test";
577595
// update only values within nested objects
578596
(() => {
579597
const update = {
580-
title: "some new title", // updates the title
598+
title: { // updates the title
599+
text: "some new title",
600+
},
581601
"xaxis.range": [0, 5], // updates the xaxis range
582602
"yaxis.range[1]": 15, // updates the end of the yaxis range
583603
} as Layout;
@@ -589,7 +609,9 @@ const graphDiv = "#test";
589609
marker: { color: "red" },
590610
};
591611
const layout_update = {
592-
title: "some new title", // updates the title
612+
title: { // updates the title
613+
text: "some new title",
614+
},
593615
};
594616
Plotly.update(graphDiv, data_update, layout_update);
595617
})();
@@ -620,7 +642,9 @@ const graphDiv = "#test";
620642
marker: { color: "red" },
621643
};
622644
const layout_update = {
623-
title: "some new title", // updates the title
645+
title: { // updates the title
646+
text: "some new title",
647+
},
624648
};
625649
Plotly.update(graphDiv, data_update, layout_update);
626650
})();

0 commit comments

Comments
 (0)