CODEWITHSUNDEEP
javascriptgraphtitleplotly.js
artist
artist

Reputation: 329

How to add title to each subplot in PLOTLY JS

just like in subject. I read documentation from plotly but i did not found any helpfull information. Maybe someone know how to add title to each plot in PLOTLY JS ?

Upvotes: 4

Views: 6737

Answers (2)

Fabian
Fabian

Reputation: 626

There's a feature request on github. In this discussion another workaround was posted by nicolaskruchten: https://github.com/plotly/plotly.js/issues/2746#issuecomment-810195118. It's still using annotations but referencing the axes domains. This has the advantage of a proper positioning relative to the subplot and the annotation stays fixed even on zooming.

Defining a domain on the axis you want to position the title (the domain is the "share" of the whole plotly canvas the subplot axis is :

    layout: {
      xaxis: { 
        domain: [0,0.48] ,
      },
      xaxis2: {
        domain: [0.52, 1],
      }
     }

the annotation itself can reference the domain on this (or both) axis:

  annotations: [
    {
      text: "X1 title",
      x: 0,
      xref: "x domain",
    },
    {
      text: "X2/Y2 title",
      x: 0,
      xref: "x2 domain",
    }
  ]

Upvotes: 1

Md Nasir Fardoush
Md Nasir Fardoush

Reputation: 820

At the moment you can,t set the subplot title directly. But you can set subplot title using annotation text.

Hear is a example

    //Set annotations text in layout configuration
annotations: [{
        text: "First subplot",
          font: {
          size: 16,
           color: 'green',
        },
        showarrow: false,
        align: 'center',
        x: 0.13, //position in x domain
        y: 1, //position in y domain
        xref: 'paper',
        yref: 'paper',
      },
        {
          text: "Second subplot",
          font: {
          size: 16,
          color: 'orange',
        },
        showarrow: false,
        align: 'center',
        x: 0.9, //position in x domain
        y: 1,  // position in y domain
        xref: 'paper',
        yref: 'paper',
        }
      ]

Annotation text plotly.js

Upvotes: 9

Related Questions