Skip to content

Commit 987ce8b

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 987ce8b

File tree

3 files changed

+62
-33
lines changed

3 files changed

+62
-33
lines changed

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

+9-12
Original file line numberDiff line numberDiff line change
@@ -410,8 +410,7 @@ export function animate(
410410
export interface Layout {
411411
colorway: string[];
412412
title:
413-
| string
414-
| Partial<{
413+
Partial<{
415414
text: string;
416415
font: Partial<Font>;
417416
xref: "container" | "paper";
@@ -428,7 +427,6 @@ export interface Layout {
428427
font: Partial<Font>;
429428
}>;
430429
}>;
431-
titlefont: Partial<Font>;
432430
autosize: boolean;
433431
showlegend: boolean;
434432
paper_bgcolor: Color;
@@ -664,12 +662,7 @@ export interface Axis {
664662
* Individual pieces can override this.
665663
*/
666664
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>;
665+
title: Partial<DataTitle>;
673666
type: AxisType;
674667
autorange: true | false | "reversed" | "min reversed" | "max reversed" | "min" | "max";
675668
autorangeoptions: Partial<AutoRangeOptions>;
@@ -1591,6 +1584,12 @@ export interface Transform {
15911584
order: "ascending" | "descending";
15921585
}
15931586

1587+
export interface ColorBarTitle {
1588+
text: string;
1589+
font: Partial<Font>;
1590+
side: "right" | "top" | "bottom";
1591+
}
1592+
15941593
export interface ColorBar {
15951594
thicknessmode: "fraction" | "pixels";
15961595
thickness: number;
@@ -1630,9 +1629,7 @@ export interface ColorBar {
16301629
exponentformat: "none" | "e" | "E" | "power" | "SI" | "B";
16311630
showexponent: "all" | "first" | "last" | "none";
16321631
minexponent: number;
1633-
title: string;
1634-
titlefont: Font;
1635-
titleside: "right" | "top" | "bottom";
1632+
title: Partial<ColorBarTitle>;
16361633
tickvalssrc: any;
16371634
ticktextsrc: any;
16381635
}

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

+24-10
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

+29-11
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,7 @@ 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> = { showlegend: true, title: { text: "January 2013 Sales Report" }, template, modebar, legend };
317323
const config: Partial<Config> = {
318324
modeBarButtons: [
319325
[
@@ -414,7 +420,9 @@ const graphDiv = "#test";
414420
},
415421
];
416422
const layout: Partial<Layout> = {
417-
title: "Grouped Box Plot",
423+
title: {
424+
text: "Grouped Box Plot",
425+
},
418426
boxmode: "overlay",
419427
};
420428

@@ -425,7 +433,9 @@ const graphDiv = "#test";
425433
const data: Array<Partial<PlotData>> = [
426434
{
427435
colorbar: {
428-
title: "Test",
436+
title: {
437+
text: "Test",
438+
},
429439
},
430440
locationmode: "ISO-3",
431441
locations: ["USA", "NLD"],
@@ -436,7 +446,9 @@ const graphDiv = "#test";
436446
];
437447
const layout: Partial<Layout> = {
438448
showlegend: true,
439-
title: "World Map",
449+
title: {
450+
text: "World Map",
451+
},
440452
geo: {
441453
projection: { type: "Mercator" },
442454
showcoastlines: true,
@@ -577,7 +589,9 @@ const graphDiv = "#test";
577589
// update only values within nested objects
578590
(() => {
579591
const update = {
580-
title: "some new title", // updates the title
592+
title: { // updates the title
593+
text: "some new title",
594+
},
581595
"xaxis.range": [0, 5], // updates the xaxis range
582596
"yaxis.range[1]": 15, // updates the end of the yaxis range
583597
} as Layout;
@@ -589,7 +603,9 @@ const graphDiv = "#test";
589603
marker: { color: "red" },
590604
};
591605
const layout_update = {
592-
title: "some new title", // updates the title
606+
title: { // updates the title
607+
text: "some new title",
608+
},
593609
};
594610
Plotly.update(graphDiv, data_update, layout_update);
595611
})();
@@ -620,7 +636,9 @@ const graphDiv = "#test";
620636
marker: { color: "red" },
621637
};
622638
const layout_update = {
623-
title: "some new title", // updates the title
639+
title: { // updates the title
640+
text: "some new title",
641+
},
624642
};
625643
Plotly.update(graphDiv, data_update, layout_update);
626644
})();

0 commit comments

Comments
 (0)