Skip to content

Commit d110f3e

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 705f73f commit d110f3e

File tree

3 files changed

+92
-52
lines changed

3 files changed

+92
-52
lines changed

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

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -435,26 +435,23 @@ export function validateTemplate(figure: TemplateFigure, template: Template): Va
435435
// Layout
436436
export interface Layout {
437437
colorway: string[];
438-
title:
439-
| string
440-
| Partial<{
441-
text: string;
442-
font: Partial<Font>;
443-
xref: "container" | "paper";
444-
yref: "container" | "paper";
445-
x: number;
446-
y: number;
447-
xanchor: "auto" | "left" | "center" | "right";
448-
yanchor: "auto" | "top" | "middle" | "bottom";
449-
pad: Partial<Padding>;
450-
subtitle:
451-
| string
452-
| Partial<{
453-
text: string;
454-
font: Partial<Font>;
455-
}>;
456-
}>;
457-
titlefont: Partial<Font>;
438+
title: Partial<{
439+
text: string;
440+
font: Partial<Font>;
441+
xref: "container" | "paper";
442+
yref: "container" | "paper";
443+
x: number;
444+
y: number;
445+
xanchor: "auto" | "left" | "center" | "right";
446+
yanchor: "auto" | "top" | "middle" | "bottom";
447+
pad: Partial<Padding>;
448+
subtitle:
449+
| string
450+
| Partial<{
451+
text: string;
452+
font: Partial<Font>;
453+
}>;
454+
}>;
458455
autosize: boolean;
459456
showlegend: boolean;
460457
paper_bgcolor: Color;
@@ -486,6 +483,12 @@ export interface Layout {
486483
hoverdistance: number;
487484
hoverlabel: Partial<HoverLabel>;
488485
calendar: Calendar;
486+
487+
// these are just the most common nested property updates that you might
488+
// want to pass to Plotly.relayout - *any* dotted property path through the
489+
// normal nested structure is valid here, and enumerating them all including
490+
// all possible [n] array indices would be infeasible (if it weren't for the
491+
// array indices, the pure a.b.c bit might be doable with conditional types)
489492
"xaxis.range": [Datum, Datum];
490493
"xaxis.range[0]": Datum;
491494
"xaxis.range[1]": Datum;
@@ -496,8 +499,8 @@ export interface Layout {
496499
"xaxis.type": AxisType;
497500
"xaxis.autorange": boolean;
498501
"yaxis.autorange": boolean;
499-
"xaxis.title": string;
500-
"yaxis.title": string;
502+
"xaxis.title": Partial<DataTitle>;
503+
"yaxis.title": Partial<DataTitle>;
501504
ternary: {}; // TODO
502505
geo: {}; // TODO
503506
mapbox: Partial<Mapbox>;
@@ -690,12 +693,7 @@ export interface Axis {
690693
* Individual pieces can override this.
691694
*/
692695
color: Color;
693-
title: string | Partial<DataTitle>;
694-
/**
695-
* Former `titlefont` is now the sub-attribute `font` of `title`.
696-
* To customize title font properties, please use `title.font` now.
697-
*/
698-
titlefont: Partial<Font>;
696+
title: Partial<DataTitle>;
699697
type: AxisType;
700698
autorange: true | false | "reversed" | "min reversed" | "max reversed" | "min" | "max";
701699
autorangeoptions: Partial<AutoRangeOptions>;
@@ -1617,6 +1615,12 @@ export interface Transform {
16171615
order: "ascending" | "descending";
16181616
}
16191617

1618+
export interface ColorBarTitle {
1619+
text: string;
1620+
font: Partial<Font>;
1621+
side: "right" | "top" | "bottom";
1622+
}
1623+
16201624
export interface ColorBar {
16211625
thicknessmode: "fraction" | "pixels";
16221626
thickness: number;
@@ -1656,9 +1660,7 @@ export interface ColorBar {
16561660
exponentformat: "none" | "e" | "E" | "power" | "SI" | "B";
16571661
showexponent: "all" | "first" | "last" | "none";
16581662
minexponent: number;
1659-
title: string;
1660-
titlefont: Font;
1661-
titleside: "right" | "top" | "bottom";
1663+
title: Partial<ColorBarTitle>;
16621664
tickvalssrc: any;
16631665
ticktextsrc: any;
16641666
}

‎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)