Customizing the font and font color in Plotly using Javascript

<head>
    <script src='https://cdn.plot.ly/plotly-2.8.3.min.js'></script>
</head>

<body>
    <div id='myDiv'></div>
  
  <script>
    var data = [{
      type: "sunburst",
      labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
      parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
      values:  [10, 14, 12, 10, 2, 6, 6, 4, 4],
      leaf: {opacity: 0.4},
      marker: {line: {width: 2}},
    }];

    var layout = {
      margin: {l: 0, r: 0, b: 0, t: 0},
      width: 500,
      height: 500,
      font: {
          color: 'red',
          family:'Times New Roman'
      },
      paper_bgcolor:'rgba(0,0,0,0)',
      plot_bgcolor:'rgba(0,0,0,0)'
    }

    Plotly.newPlot('myDiv', data, layout);
  </script>
</body>

I am currently working on customizing my sunburst chart using Javascript and Plotly version 2.8.3. My goal is to adjust the color and font style of each section to red and Times New Roman, respectively.

Although I have managed to change the font style successfully, I am facing an issue where only the middle section's color changes. Is there a solution or workaround to ensure consistent color changes across all sections?

javascriptplotly.js

Answer №1

Utilize the insidetextfont attribute within the sunburst Trace :

insidetextfont: {
    color: "red",
}


<head>
    <script src='https://cdn.plot.ly/plotly-2.8.3.min.js'></script>
</head>

<body>
    <div id='myDiv'></div>
  
  <script>
    var data = [{
      type: "sunburst",
      labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
      parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
      values:  [10, 14, 12, 10, 2, 6, 6, 4, 4],
      leaf: {opacity: 0.4},
      marker: {line: {width: 2}},
      insidetextfont: {
        color: "red",
      }
    }];

    var layout = {
      margin: {l: 0, r: 0, b: 0, t: 0},
      width: 500,
      height: 500,
      font: {
          color: 'red',
          family:'Times New Roman'
      },
      paper_bgcolor:'rgba(0,0,0,0)',
      plot_bgcolor:'rgba(0,0,0,0)'
    }

    Plotly.newPlot('myDiv', data, layout);
  </script>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to identify the specific occurrence when the nth image is displayed within a div containing an image slider

I am working on an image carousel with unique elements for each slide: <div class="outer_wrapper_hide" id="outer_wrapperID"> <div class="inner_wrapper" id="inner_wrapperID"> <img id="slideimage1" class="slideimage" height="500" ...

javascriptjquery

Determine if localStorage is set using jQuery

There is a text on the page inside a div with the id clicker. When this div is clicked, the localStorage value should toggle between 1 and 0. I have provided an example in this JSFiddle link. Although it seems to be working by toggling the value, there ar ...

javascriptjqueryhtmllocal-storage

Is there a way to use jQuery to adjust the text color once it has been clicked on?

I have been struggling to change the text color upon clicking on it without any success. Within my code, there are seven labels - one for the question, four for the answer options, one for the correct answer, and the last one for the explanation. The desi ...

javascriptjqueryasp.net

A guide on obtaining the pixel dimensions of a ThreeJS mesh object: determining its visible width and height

I am currently grappling with the task of determining the visible view width and height of a ThreeJS mesh object in pixel units. In the image provided below, you can observe objects suspended in 3D space. Upon clicking the mouse, I need to be able to disc ...

javascriptthree.js

How can I match the date format of d-M-Y using JavaScript regex?

When it comes to date formatting in PHP, I typically use the format d-M-Y. Recently, I attempted to match these dates using a JavaScript regex: s.match(new RegExp(/^(\d{1,2})(\-)(\w{3})(\-)(\d{4})$/)) I wanted to use this regex w ...

javascriptregex

Troubleshooting Issues with JavaScript Counter and JSON Integration

When manually inserting a number into the HTML, the counter works fine. However, when pulling data remotely, there seems to be a problem. The remote data is logging correctly in the console and appears properly in the DOM element when the counter code is d ...

javascriptjqueryjsonajaxxml

Guide on displaying the appropriate component in NextJs routes

Whenever I switch routes, I encounter an issue. While navigating between pages works fine, dynamic routes are not rendered correctly. In the routes, I have a folder called uw with a file named [table].js inside. For example, when I manually navigate to uw ...

javascriptreactjsnext.js

ESLint is reminding you that the `parserOptions.project` setting must be configured to reference the tsconfig.json files specific to your

Within my NX Workspace, I am developing a NestJS-Angular project. Upon running nx lint, an error is triggered with the following message: Error: A lint rule requiring the TypeScript type-checker to be fully available has been attempted, but `parserOptions. ...

javascriptnode.jstypescripteslinttypescript-eslint

Creating a pair of interconnected drop-down menus linked to arrays within a Rails model

I have spent hours searching on Google and Stack Overflow, but I haven't been able to find a solution that fits my requirements. As a newcomer to Rails, I am currently working on a bug tracking system in Rails 4.2.4. Within this system, I have a class ...

javascriptjqueryruby-on-railsdrop-down-menu

Teach me how to utilize Import / require() in Static Folder

I've been attempting this task for a while, but I'm unsure how to incorporate import or require into the express static folder. When I try to use it, I receive an error stating "require not defined" which makes sense since these are not supported ...

javascriptexpressimport

What is the process for adding an event listener in React?

Currently, I am working on a chat application that involves both users and agents. I am facing an issue where I need to retrieve messages when the agent responds using a separate Rainbow UI. According to the documentation, this can only be achieved using a ...

javascriptreactjsexpressdomecmascript-6

Loading images asynchronously in Next.js before the user arrives at the component displaying them

Currently, I am developing a Next.js application with only one page where users have the option to click on certain buttons to reveal an image. I would like to make it mandatory for clients to download the image before revealing it through a click event. S ...

javascriptreactjsnext.jspreloadnext-images

What sets apart .andReturn(...) from .respondWith(...) when running AJAX call tests in JavaScript using Jasmine?

While utilizing the jasmine-ajax library for testing JavaScript code, I have discovered a way to mock ajax responses. There are essentially two methods to achieve this: Method #1: jasmine.Ajax.requests.mostRecent().respondWith({ status: 200, contentT ...

javascriptajaxunit-testingjasmine

Unable to access the 'mobile' property as it is not defined - Vue/Vuetify/Storybook

I am encountering an issue with the "canvas" screen on my storybook's Vue and Vuetify story. While other components are functioning correctly, this particular one is not working as expected. It appears that my story is unable to identify the 'mob ...

javascriptvue.jsvuetify.jsstorybook

Merge HTML documents with this powerful JavaScript library

Our team has developed an email generator that creates HTML emails based on specific parameters. Users can simply select or deselect options and the email will be regenerated accordingly. Occasionally, users may need to make minor manual changes to the co ...

javascripthtmlmerge

Utilize Javascript to interpret a structure that resembles JSON

My data resembles JSON, with columns and names listed: columns: [ { allowNull: false, autoEnterSubType: 0, autoEnterType: 2, creationOrderIndex: 0, dataType: 4, databaseSequenceName: "seq_admintraties_adminratie_id", flag ...

javascriptjsonparsing

The usage of ngRoute clashes with the functionality of Animated Scroll

I am experiencing a conflict between my ng-route and the animated scroll feature on my website: Below is the code for my scroll element: <a href="#one" class="goto-next scrolly">Next</a> In this code, "#one" represents the section ID to scro ...

javascriptangularjs

Limiting functional component re-renders to only occur when certain states change

Is there a way to make a component re-render only when a specific state in that component changes, instead of re-rendering with every state change? Here is an example code snippet: suppose I have a component with three states and I want it to re-render on ...

javascriptreactjstypescript

What is the best approach for dynamically updating JSON values using user input in jQuery?

I have implemented a feature where users can enter values into 3 text boxes and upon clicking the add button, these values are added to a new JSON object and displayed in a table. Additionally, users can edit specific fields in the table which should updat ...

javascriptjqueryjson

Retrieving information from dynamically generated list items

I am trying to retrieve the value from a dynamically created LI element. After some research, I came across this helpful answer that explains how to achieve it in a normal scenario. The following code is working perfectly for the two existing elements wi ...

javascriptjqueryhtmlcss