plotly / plotly/angular-plotly.js

Plotly table is not working

Open
#169 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
242
Forks
81
Avg merge
8h 48m
Merged PRs (30d)
18

Description

Problem Overview

  • plotly table is showing a blank chart in Angular solution
  • Note: I have tried the same thing a month back with plotly version 2.2.1 and it was working fine.

Steps Followed

  • Installed plotly in an Angular solution with below commands
    npm install plotly.js-dist --save
    npm install @types/plotly.js --save
    npm install @types/d3 --save

  • Rename folder "plotly.js" to "plotly.js-dist" in "node_modules/@types".

Line/Scatter plots works fine with this approach. However, table is showing an empty graph.

Also, tried with PlotlyViaCDNModule - still the issue is same

Below is how the angular component & module files

app.module.ts

import { PlotlyViaCDNModule } from 'angular-plotly.js';
import { CommonModule } from '@angular/common';

PlotlyViaCDNModule.setPlotlyVersion('1.55.2'); // can be latest or any version number (i.e.: '1.40.0')
PlotlyViaCDNModule.setPlotlyBundle('basic');
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
PlotlyViaCDNModule,
CommonModule
],

app.component.ts

export class AppComponent {
public values = [
['Salaries', 'Office', 'Merchandise', 'Legal', 'TOTAL'],
[1200000, 20000, 80000, 2000, 12120000],
[1300000, 20000, 70000, 2000, 130902000],
[1300000, 20000, 120000, 2000, 131222000],
[1400000, 20000, 90000, 2000, 14102000]]

public data = [{
type: 'table',
header: {
values: [["EXPENSES"], ["Q1"],
["Q2"], ["Q3"], ["Q4"]],
align: "center",
line: {width: 1, color: 'black'},
fill: {color: "grey"},
font: {family: "Arial", size: 12, color: "white"}
},
cells: {
values: this.values,
align: "center",
line: {color: "black", width: 1},
font: {family: "Arial", size: 11, color: ["black"]}
}
}]

constructor() {

}

}

app.component.html
<plotly-plot [data]="data">

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the blank table from app.module.ts, app.component.ts, and app.component.html using the shown PlotlyViaCDNModule setup and table data. Compare this with the working line or scatter plot examples; the issue is done when the supplied table renders correctly in the Angular component.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.