Skip to content
Open
Changes from 1 commit
Commits
Show all changes
112 commits
Select commit Hold shift + click to select a range
be6d4df
Init - basic working implementation
kb- May 18, 2024
55c1b31
Implemented style and template handling
kb- May 19, 2024
0e0591e
Added Dash and Python demo
kb- May 19, 2024
fcd8457
Update index.html
kb- May 19, 2024
d69ac85
Update README.md
kb- May 19, 2024
dcb5eec
Update README.md
kb- May 19, 2024
a617412
Added schema and cleanup
kb- May 19, 2024
4eb2801
Made linter happy
kb- May 19, 2024
47f4925
Update README.md
kb- May 19, 2024
4744a1f
locales
kb- May 20, 2024
723276c
Merge branch 'dev-tooltip' of plotly.js:kb-/plotly.js into dev-tooltip
kb- May 20, 2024
11e47c6
Demo
kb- May 20, 2024
653e666
Update various.html
kb- May 20, 2024
2babc9b
Update various.html
kb- May 20, 2024
c84007b
Handle log axis
kb- May 20, 2024
421546e
Update various.html
kb- May 20, 2024
24586ad
Handle log axis
kb- May 20, 2024
df56bf1
Check parameters availability
kb- May 20, 2024
ca55621
Merge branch 'dev-tooltip' of plotly.js:kb-/plotly.js into dev-tooltip
kb- May 20, 2024
8196cd7
Merged src/components/modebar/buttons.js from dev-tooltip-all into de…
kb- May 22, 2024
bade5e8
Merge branch 'master'
kb- Jul 18, 2024
6fd5b10
build
kb- Jul 18, 2024
c422552
Added test mocks
kb- Jul 19, 2024
f3cbc0f
untrack dist
kb- Jul 19, 2024
643479f
Added Jasmine test
kb- Jul 24, 2024
bb296e9
linter fix
kb- Jul 26, 2024
914d88a
Merge branch 'master' into dev-tooltip
kb- Jul 28, 2024
c0ac3ed
cleanup
kb- Jul 28, 2024
5997181
Add histogram2d test mock
kb- Jul 28, 2024
ce61edc
fixed 0 value handling
kb- Jul 28, 2024
d5bfcf1
fixed multi curve histogram handling
kb- Jul 28, 2024
34c5d4a
Handle subplots
kb- Jul 28, 2024
3461a50
make default number format consistent with hover
kb- Jul 28, 2024
0e09adf
Add z to heatmap tooltip default template
kb- Jul 28, 2024
297f208
Fixed subplot handling
kb- Jul 29, 2024
b06d9e7
Fixed test
kb- Jul 29, 2024
9f1d071
generate histogram test click
kb- Aug 2, 2024
baf2d38
Change to assets click function
kb- Aug 3, 2024
96538aa
Added test on log axis plot
kb- Aug 3, 2024
2e94cf7
fixed timing
kb- Aug 3, 2024
4b87290
Test preventing second tooltip on same data point
kb- Aug 3, 2024
0edf63d
Generic default template based on data availability
kb- Aug 3, 2024
6464184
Complete attributes
kb- Aug 4, 2024
de95245
Handle multycategory
kb- Aug 7, 2024
b41160f
Merge branch 'master' into dev-tooltip
kb- Aug 10, 2024
46548c6
fix subplot handling
kb- Aug 21, 2024
0a31a8b
Added default template for category axis
kb- Aug 21, 2024
fc509f7
More test image mocks
kb- Aug 22, 2024
ffd6340
Add violin side to side handling
kb- Aug 22, 2024
022c960
Merge branch 'master' into dev-tooltip
kb- Aug 22, 2024
c1804af
Fixed test click point
kb- Aug 22, 2024
25bc3ac
handle missing axis info
kb- Aug 22, 2024
1cd0960
Added tooltip to hasGL2D
kb- Aug 22, 2024
b042ddf
Added gl2d mocks
kb- Aug 22, 2024
6fa84ce
Schema update
kb- Aug 22, 2024
0fd21bc
Blacklist mock files derived from existing blacklisted files
kb- Aug 22, 2024
5930d29
test_syntax
kb- Aug 24, 2024
28cf945
Merge branch 'master' into dev-tooltip
kb- Aug 24, 2024
273e22c
fixed attributes - plotschema pass
kb- Aug 24, 2024
645c7f6
removed circular reference
kb- Aug 26, 2024
f0d24eb
add baselines (no tooltip displayed)
kb- Aug 26, 2024
a64af96
draftlog
kb- Aug 26, 2024
79c4388
test-mock pass
kb- Aug 26, 2024
13b74a1
Implement heatmap attribute - default tooltiptemplate
kb- Aug 28, 2024
34f8f11
schema
kb- Aug 28, 2024
78a7a2a
Create tooltip_template_heatmap.png
kb- Oct 11, 2024
40607a8
Merge branch 'master' into dev-tooltip
kb- Oct 12, 2024
c04ae71
fixed heatmat attributes
kb- Oct 12, 2024
b139c07
fixed scatter attributes
kb- Oct 12, 2024
bc6652e
fixed bar attributes
kb- Oct 12, 2024
7bac76a
fixed bar attributes
kb- Oct 12, 2024
3416d50
fixed box defaults
kb- Oct 12, 2024
f65a4db
fixed funnel defaults
kb- Oct 12, 2024
b0e7fa3
fixed candlestick attributes
kb- Oct 12, 2024
4fed40e
fixed heatmapgl defaults
kb- Oct 12, 2024
2c1d70d
fixed scattergl defaults
kb- Oct 12, 2024
735082a
fixed histogram attributes
kb- Oct 12, 2024
5884f4f
fixed histogram2d attributes
kb- Oct 12, 2024
d727a1c
fixed histogram2dcontour attributes
kb- Oct 12, 2024
4e74db1
fixed ohlc attributes (bug on master)
kb- Oct 12, 2024
95625a1
fixed pointcloud defaults (bug on master)
kb- Oct 12, 2024
0ac20bd
fixed scattercarpet attributes
kb- Oct 12, 2024
373ff66
fixed contour defaults
kb- Oct 12, 2024
54b73ee
fixed splom attributes
kb- Oct 12, 2024
8eb01bd
fixed violin defaults
kb- Oct 12, 2024
8d4acac
fixed waterfall attributes
kb- Oct 12, 2024
43db9b3
fixed attributes
kb- Oct 13, 2024
5361195
Merge branch 'master' into dev-tooltip
kb- Oct 13, 2024
3d0f76a
schema
kb- Oct 13, 2024
baf913e
removed ohlc tests (ohlc_first from master fails too)
kb- Oct 13, 2024
227b0be
baselines
kb- Oct 13, 2024
2720fb8
removed obsolete plot types tests
kb- Oct 13, 2024
ce08efb
removed candlestick test (candlestick from master fails too)
kb- Oct 13, 2024
655ba2d
removed obsolete plot types test
kb- Oct 13, 2024
6b04964
removed dflt (was not compatible with category)
kb- Oct 13, 2024
f8ca024
fixed scattercarpet attributes
kb- Oct 13, 2024
00cc9e7
fixed heatmap dflt (was not compatible with category)
kb- Oct 13, 2024
1ba450e
fixed bar arrow placement for shared categories
kb- Oct 13, 2024
b538574
schema
kb- Oct 13, 2024
3d5103d
fixed jasmine test
kb- Oct 13, 2024
73e8c55
baseline
kb- Oct 13, 2024
c817480
moved ohlc template to attributes
kb- Oct 13, 2024
dc026cc
fixed candlestick attributes
kb- Oct 13, 2024
298af7d
mocks
kb- Oct 13, 2024
25efa5f
fixed waterfall arrow placement
kb- Oct 13, 2024
8c7ac8e
schema
kb- Oct 13, 2024
6524182
Delete notes.txt
kb- Nov 4, 2024
a5e2668
Resolved merge conflict
kb- Nov 4, 2024
550cf0b
schema
kb- Nov 4, 2024
33e1005
Handle stacked traces
kb- Nov 16, 2024
6f9904e
baselines
kb- Nov 17, 2024
317a430
removed mock
kb- Nov 17, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Merge branch 'master' into dev-tooltip
  • Loading branch information
kb- committed Jul 28, 2024
commit 914d88aac5d94bf47e5f2921cdde07faef650f08
167 changes: 160 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,170 @@
[![circle ci](https://circleci.com/gh/plotly/plotly.js.png?&style=shield&circle-token=1f42a03b242bd969756fc3e53ede204af9b507c0)](https://circleci.com/gh/plotly/plotly.js)
[![MIT License](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://github.com/plotly/plotly.js/blob/master/LICENSE)

This branch introduces a tooltip feature that can be activated by a new modebar button. It allows to add an annotation to every clicked point.
By default, tooltips contain x and y coordinates. They can be customized to contain any additional data attached to the trace or points, which makes it a powerful tool for data exploration and presentation.
[Plotly.js](https://plotly.com/javascript) is a standalone Javascript data visualization library, and it also powers the Python and R modules named `plotly` in those respective ecosystems (referred to as [Plotly.py](https://plotly.com/python) and [Plotly.R](http://plotly.com/r)).

When a plot is created with `editable: true`, the tooltips can be dragged around or deleted interactively. Their text can also be edited.
To delete a tooltip, click on its text and delete it.
Plotly.js can be used to produce dozens of chart types and visualizations, including statistical charts, 3D graphs, scientific charts, SVG and tile maps, financial charts and more.

Tooltips can be customized with an optional `tooltiptemplate` (possibilities equivalent to [hovertemplate](https://plotly.com/javascript/reference/scatter/#scatter-hovertemplate)) and `tooltip` annotation options (possibilities equivalent to [annotations](https://plotly.com/javascript/text-and-annotations/))
![image](https://github.com/kb-/plotly.js/assets/2260417/f7258b47-6eb2-4c3c-a3ce-f23899fe57e1)
<p align="center">
<a href="https://plotly.com/javascript/" target="_blank">
<img src="https://raw.githubusercontent.com/cldougl/plot_images/add_r_img/plotly_2017.png">
</a>
</p>

This update is compatible with Dash when a figure is created with a Dictionary passed to dcc.Graph (see example in *demo* folder), but not yet with Plotly.py (its implementation enforces a limited set of properties).
[Contact us](https://plotly.com/products/consulting-and-oem/) for Plotly.js consulting, dashboard development, application integration, and feature additions.

<div align="center">
<a href="https://dash.plotly.com/project-maintenance">
<img src="https://dash.plotly.com/assets/images/maintained-by-plotly.png" width="400px" alt="Maintained by Plotly">
</a>
</div>


## Table of contents

* [Load as a node module](#load-as-a-node-module)
* [Load via script tag](#load-via-script-tag)
* [Bundles](#bundles)
* [Alternative ways to load and build plotly.js](#alternative-ways-to-load-and-build-plotlyjs)
* [Documentation](#documentation)
* [Bugs and feature requests](#bugs-and-feature-requests)
* [Contributing](#contributing)
* [Notable contributors](#notable-contributors)
* [Copyright and license](#copyright-and-license)
* [Community](#community)

---
## Load as a node module
Install [a ready-to-use distributed bundle](https://github.com/plotly/plotly.js/blob/master/dist/README.md)
```sh
npm i --save plotly.js-dist-min
```

and use import or require in node.js
```js
// ES6 module
import Plotly from 'plotly.js-dist-min'

// CommonJS
var Plotly = require('plotly.js-dist-min')
```

You may also consider using [`plotly.js-dist`](https://www.npmjs.com/package/plotly.js-dist) if you prefer using an unminified package.

---
## Load via script tag

### The script HTML element
> In the examples below `Plotly` object is added to the window scope by `script`. The `newPlot` method is then used to draw an interactive figure as described by `data` and `layout` into the desired `div` here named `gd`. As demonstrated in the example above basic knowledge of `html` and [JSON](https://en.wikipedia.org/wiki/JSON) syntax is enough to get started i.e. with/without JavaScript! To learn and build more with plotly.js please visit [plotly.js documentation](https://plotly.com/javascript).

```html
<head>
<script src="https://cdn.plot.ly/plotly-2.34.0.min.js" charset="utf-8"></script>
</head>
<body>
<div id="gd"></div>

<script>
Plotly.newPlot("gd", /* JSON object */ {
"data": [{ "y": [1, 2, 3] }],
"layout": { "width": 600, "height": 400}
})
</script>
</body>
```

Alternatively you may consider using [native ES6 import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) in the script tag.
```html
<script type="module">
import "https://cdn.plot.ly/plotly-2.34.0.min.js"
Plotly.newPlot("gd", [{ y: [1, 2, 3] }])
</script>
```

Fastly supports Plotly.js with free CDN service. Read more at <https://www.fastly.com/open-source>.

### Un-minified versions are also available on CDN
While non-minified source files may contain characters outside UTF-8, it is recommended that you specify the `charset` when loading those bundles.
```html
<script src="https://cdn.plot.ly/plotly-2.34.0.js" charset="utf-8"></script>
```

> Please note that as of v2 the "plotly-latest" outputs (e.g. https://cdn.plot.ly/plotly-latest.min.js) will no longer be updated on the CDN, and will stay at the last v1 patch v1.58.5. Therefore, to use the CDN with plotly.js v2 and higher, you must specify an exact plotly.js version.

### MathJax
You could load either version two or version three of MathJax files, for example:
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js"></script>
```

```html
<script src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-svg.js"></script>
```

> When using MathJax version 3, it is also possible to use `chtml` output on the other parts of the page in addition to `svg` output for the plotly graph.
Please refer to `devtools/test_dashboard/index-mathjax3chtml.html` to see an example.

### Need to have several WebGL graphs on a page?
You may simply load [virtual-webgl](https://github.com/greggman/virtual-webgl) script for WebGL 1 (not WebGL 2) before loading other scripts.
```html
<script src="https://unpkg.com/[email protected]/src/virtual-webgl.js"></script>
```

## Bundles
There are two kinds of plotly.js bundles:
1. Complete and partial official bundles that are distributed to `npm` and the `CDN`, described in [the dist README](https://github.com/plotly/plotly.js/blob/master/dist/README.md).
2. Custom bundles you can create yourself to optimize the size of bundle depending on your needs. Please visit [CUSTOM_BUNDLE](https://github.com/plotly/plotly.js/blob/master/CUSTOM_BUNDLE.md) for more information.

---
## Alternative ways to load and build plotly.js
If your library needs to bundle or directly load [plotly.js/lib/index.js](https://github.com/plotly/plotly.js/blob/master/lib/index.js) or parts of its modules similar to [index-basic](https://github.com/plotly/plotly.js/blob/master/lib/index-basic.js) in some other way than via an official or a custom bundle, or in case you want to tweak the default build configurations, then please visit [`BUILDING.md`](https://github.com/plotly/plotly.js/blob/master/BUILDING.md).

---
## Documentation

Official plotly.js documentation is hosted at [https://plotly.com/javascript](https://plotly.com/javascript).

These pages are generated by the Plotly [graphing-library-docs repo](https://github.com/plotly/graphing-library-docs) built with [Jekyll](https://jekyllrb.com/) and publicly hosted on GitHub Pages.
For more info about contributing to Plotly documentation, please read through [contributing guidelines](https://github.com/plotly/graphing-library-docs/blob/master/README.md).

---
## Bugs and feature requests

Have a bug or a feature request? Please [open a Github issue](https://github.com/plotly/plotly.js/issues/new) keeping in mind the [issue guidelines](https://github.com/plotly/plotly.js/blob/master/.github/ISSUE_TEMPLATE.md). You may also want to read about [how changes get made to Plotly.js](https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md)

---
## Contributing

Please read through our [contributing guidelines](https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md). Included are directions for opening issues, using plotly.js in your project and notes on development.

---
## Notable contributors

Plotly.js is at the core of a large and dynamic ecosystem with many contributors who file issues, reproduce bugs, suggest improvements, write code in this repo (and other upstream or downstream ones) and help users in the Plotly community forum. The following people deserve special recognition for their outsized contributions to this ecosystem:

| | GitHub | Twitter | Status |
|---|--------|---------|--------|
|**Alex C. Johnson**| [@alexcjohnson](https://github.com/alexcjohnson) | | Active, Maintainer |
|**Mojtaba Samimi** | [@archmoj](https://github.com/archmoj) | [@solarchvision](https://twitter.com/solarchvision) | Active, Maintainer |
|**Emily Kellison-Linn** | [@emilykl](https://github.com/emilykl) | | Active, Maintainer |
|**My-Tien Nguyen**| [@my-tien](https://github.com/my-tien) | | Active, Community Contributor |
|**Étienne Tétreault-Pinard**| [@etpinard](https://github.com/etpinard) | [@etpinard](https://twitter.com/etpinard) | Hall of Fame |
|**Antoine Roy-Gobeil** | [@antoinerg](https://github.com/antoinerg) | | Hall of Fame |
|**Jack Parmer**| [@jackparmer](https://github.com/jackparmer) | | Hall of Fame |
|**Nicolas Kruchten** | [@nicolaskruchten](https://github.com/nicolaskruchten) | [@nicolaskruchten](https://twitter.com/nicolaskruchten) | Hall of Fame |
|**Mikola Lysenko**| [@mikolalysenko](https://github.com/mikolalysenko) | [@MikolaLysenko](https://twitter.com/MikolaLysenko) | Hall of Fame |
|**Ricky Reusser**| [@rreusser](https://github.com/rreusser) | [@rickyreusser](https://twitter.com/rickyreusser) | Hall of Fame |
|**Dmitry Yv.** | [@dy](https://github.com/dy) | [@DimaYv](https://twitter.com/dimayv)| Hall of Fame |
|**Jon Mease** | [@jonmmease](https://github.com/jonmmease) | [@jonmmease](https://twitter.com/jonmmease) | Hall of Fame |
|**Robert Monfera**| [@monfera](https://github.com/monfera) | [@monfera](https://twitter.com/monfera) | Hall of Fame |
|**Robert Möstl** | [@rmoestl](https://github.com/rmoestl) | [@rmoestl](https://twitter.com/rmoestl) | Hall of Fame |
|**Nicolas Riesco**| [@n-riesco](https://github.com/n-riesco) | | Hall of Fame |
|**Miklós Tusz**| [@mdtusz](https://github.com/mdtusz) | [@mdtusz](https://twitter.com/mdtusz)| Hall of Fame |
|**Chelsea Douglas**| [@cldougl](https://github.com/cldougl) | | Hall of Fame |
|**Ben Postlethwaite**| [@bpostlethwaite](https://github.com/bpostlethwaite) | | Hall of Fame |
|**Hannah Ker** | [@hannahker](https://github.com/hannahker) | [@hannahker11](https://twitter.com/hannahker11)| Hall of Fame |
|**Chris Parmer**| [@chriddyp](https://github.com/chriddyp) | | Hall of Fame |
|**Alex Vados**| [@alexander-daniel](https://github.com/alexander-daniel) | | Hall of Fame |

---
## Copyright and license
Expand Down
You are viewing a condensed version of this merge commit. You can view the full changes here.