Skip to main content
Filter by
Sorted by
Tagged with
1 vote
1 answer
59 views

Angular v12: Uncaught (in promise): ReferenceError: d3 is not defined ReferenceError: d3 is not defined

Angular v12, try to use d3, nvd3 (not ng2-nvd3). Compile ok, but run time error. default-node_modules_d3_src_index_js.js:2 ERROR Error: Uncaught (in promise): ReferenceError: d3 is not defined ...
Jeb50's user avatar
  • 7,027
1 vote
0 answers
178 views

Can't interpret arcs in TopoJSON

I'm having a lot of problems trying to interpret the arcs member of the TopoJSON as opposed to the coordinates member of the GeoJSON. Using this reference https://observablehq.com/@syaleni/topojson-vs-...
David98761324's user avatar
0 votes
1 answer
191 views

Add chart to html project

I am a newbie in this field. I want add chart.js code to my project. But I can't do it. Here is my main.html - main area: <!-- main area --> <div class="main-content"> <...
user09's user avatar
  • 11
0 votes
0 answers
38 views

Source & Target element is same when we do Drag & Drop in touch Devices using D3 (v3.4.12 )

I am doing Drop & Drop from touch device , ideally the source element & target element should not be the same. Example I am dragging from polygon1 to polygon2 , so source should be Polygon1 &...
Godson Dabre's user avatar
1 vote
1 answer
57 views

Text Flip issue with D3.js , when transform attribute used

I am new to D3.js. I added simple polygon & than text, but it's showing text as Flipped text.This is because i have used 'Transform attribute' i guess. Is there anyway, i keep the existing ...
Godson Dabre's user avatar
1 vote
1 answer
306 views

What does the second argument do in the .tickSize(10, 1) in d3.axis?

I have been going through some code and I encountered .tickSize(10,1) and .tickSize(10, 0) I know the first argument fixes the tickSize. Can anybody explain what the second argument do?
Sathish Kannan's user avatar
0 votes
1 answer
116 views

NVD3 - Use superscript in axis label

TLDR: My NVD3 chart's Y-Axis label is "Molecular density (kg/m^3)" but I would like it instead to be "Molecular density (kg/m3)". I am currently using NVD3 JavaScript library to ...
Vada Poché's user avatar
0 votes
1 answer
90 views

NVD3 - show tick lines only on axes

TLDR: I have an NVD3 graph that shows tick lines all across the axis, but I would like to change it so it only displays on the axis lines if possible. Here is a live example: var app = angular....
Vada Poché's user avatar
5 votes
1 answer
2k views

Uncaught TypeError: Cannot read properties of undefined (reading 'document')

I am using nvd3 charts(nvd3-1.8.5, d3-3.5.17), facing the below issue after Upgrading from angular 12 to angular 14. When it was in angular 12 I didn't face any issues. Uncaught TypeError: Cannot read ...
Hemanth's user avatar
  • 61
0 votes
0 answers
55 views

A typical Bar graph Using D3JS or any other library with interactions. Can someone help on this?

Can we draw the below bar chart using d3js? In My view it looks very complex, Can someone help me to draw this? Interactions: On launch first, the Yellow bar lines should animate and after a couple of ...
Yashwanth Gurrapu's user avatar
0 votes
1 answer
43 views

No axis ticks on nvd3.js multiBarHorizontalChart

Here is a nvd3.js horizontal multibar chart. The x-axis has no ticks (between 0 and 44.6). How can I get some x-axis ticks? <!DOCTYPE html> <html> <head> <meta charset="...
Stéphane Laurent's user avatar
2 votes
1 answer
58 views

Title for keys in nvd3 multiBarChart

Is it possible to have a legend for the "key" variable in a nvd3 multibarchart? The keys appear at the top right corner, "In progress" and "Complete" in the example below....
Stéphane Laurent's user avatar
0 votes
1 answer
96 views

NVD3 Multi series line bar chart

So the current Nvd3 Line Bar Chart only allows 1 key for line and 1 key for bar. Is there a way to have multiple keys for line and bar, just like the standalone Line Chart and Bar Chart?
PTN's user avatar
  • 1,682
0 votes
1 answer
135 views

Find intersection of given two lines each passing through more than two points

Challenge: We have two lines. Blue line passes through points : (20,100), (25,44.44), (30,30), (35,20), (40,0), (45,0), (50,0), (55,0), (60,0) Pink line passes through points : (20,00), (25,0), (30,0),...
Parth Choksi's user avatar
1 vote
0 answers
99 views

nvd3 date comparison on x axis

As you can see on the photo, I pushed 2 different series to the nvd3 with datum function. Current line shows today and previous line shows previous range of date of data. What If I want to merge it on ...
bl4cksta's user avatar
  • 684
1 vote
0 answers
32 views

How to remove checkmarks when lines on nvd3 chart are deselected by default

I would like to set all the lines on nvd3 chart to be deselected by default. I modified the code on the live chart from nvd3 website. here (Sorry, I don't know how to save the code). I added legend: { ...
Jeff's user avatar
  • 11
1 vote
0 answers
62 views

NVD3 tooltip change event

I have a nvd3 chart and a html table. I need to update table values as the user moves the mouse over the chart. Is there an event I can use to catch a nvd3 tooltip change and get the date value at the ...
gipadm's user avatar
  • 543
0 votes
1 answer
128 views

How to add more attributes in tooltip series in Angular NVD3 line chart

I need to add more attributes in tooltip series in Angular NVD3 line chart, if possible, without modifying the NVD3 source code. I know there are similar posts, but none of them covers this scenario. ...
user2217057's user avatar
2 votes
0 answers
914 views

A string ref, "root", has been found within a strict mode tree error in React

Understand this question might have been asked before, but the solutions haven't worked for me. Basically when I use any setState in the file, I get the following error for string ref "root",...
tammi's user avatar
  • 173
0 votes
2 answers
397 views

Custom tooltip in lineChart of nvd3.js

How to create a custom tooltip in lineChart of nvd3.js?, i want to add a "total" value in the tooltip something like this I've tried to call the chart.tooltip.contentGenerator, to create a ...
p3ac3's user avatar
  • 161
0 votes
0 answers
49 views

how to set background color only for last bar in d3 multibar chart

image of bar chartSpacing and background color the last bar from D3 bar chart? This may be a simple question, but if we have a bar chart which is built using D3.js then how can I decorate just the ...
Abhijeet Wagh's user avatar
2 votes
0 answers
260 views

How to execute code after a d3.js svg is fully loaded?

I use an external library that uses d3 to print a bubble chart. I am coding in Angular. I want to override the onmouseover event of one the sub-components within the bubble chart. If I type this in ...
Adrian Santos's user avatar
1 vote
2 answers
107 views

Understanding and rebuilding overload of a dataframe to d3 format

I am really desperated about a function for a dataframe overload, from R to the nvd3-line-chart. My inteniton is to display a dataframe in R Shiny app using the nvd3 linechart as shown here: https://...
Sam Amani's user avatar
2 votes
1 answer
1k views

D3 Stacked Bar chart : issue calculating and displaying sum/total of each bar

I am trying to calculate the sum/total value of each stacked bar in the chart and display it above each bar https://jsfiddle.net/n0zjpyow/1/ Desired output: (note:totals not accurate in image) I ...
grimmus's user avatar
  • 513
1 vote
1 answer
140 views

NVD3 - Stacked Bar chart, space after every second bar

I would like to insert 100px of space after every second bar in my stacked bar chart http://jsfiddle.net/dvm628e3/1/ The desired output is The groupSpacing property helps me do this for each bar ...
grimmus's user avatar
  • 513
1 vote
1 answer
27 views

How to change the y-axis scale in Nvd3?

I am new in nvd3. How can I edit the y-axis scale. I saw in another question a method-call like this: chart.yDomain([0, 15]); But that did not work. My current code looks like this: case $scope....
alexis12345678's user avatar
0 votes
1 answer
142 views

Drawing Wealth of Nations D3 graph using React

I want to draw the wealth of nations interactive graph visualization using React js in my App but im not sure how to proceed in d3 version 5. This is what i want to make: https://observablehq.com/@...
Ginto Joseph's user avatar
1 vote
0 answers
35 views

Cannot run a function which is defined in scope from clickable tooltips of nvd3 charts

I have been trying to define a function in scope and trigger it when button is clicked in the tooltip. Here is the code that I have been working on in plnkr Clickable tooltips. I have modified plnkr ...
klin's user avatar
  • 133
3 votes
1 answer
161 views

nvd3 charts - changing text color in hover boxes

All of my charts, regardless of type, have the popover/hover box with a dark grey (almost black) background with black text - making it almost impossible to read. The color segment of the chart ...
rolinger's user avatar
  • 3,042
2 votes
1 answer
354 views

D3 bar chart yaxis scaling issue, I don't want decimal/duplicate values

I have implemented D3 chart using NVD3 library below is the link for the reference. Is there a way that I can stop this automatic scaling or get rid of this decimal values. http://nvd3.org/livecode/...
nitinsingh9x's user avatar
-2 votes
1 answer
279 views

How to Use NVD3.JS or D3.JS library to build Dashboard in OpenERP V7?

I'm having a dataset, and I would like to visualize it in a dashboard on Odoo/OpenERP V7. Is there a way, I can import with it D3.JS or NVD3.JS charts into odoo and visualize them there? Else, how ...
Idhem's user avatar
  • 964
0 votes
1 answer
455 views

Pie chart on tooltip hover on multi bar chart nvd3

Can we show a different graph say pie chart in the tooltip hover in the bar chart using nvd3?
cooler's user avatar
  • 141
0 votes
1 answer
99 views

Problem with label position with more than one nvd3 graph on one site

I have two nvd3 graph on my site. First graph with mouseover: Code for first graph: var chart = nv.models.multiBarChart() .reduceXTicks(true) //If 'false', every single x-axis tick ...
Kᴀτᴢ's user avatar
  • 2,176
1 vote
0 answers
73 views

Memory leak issue with NVD3

We are using NVD3 js chart where we are seeing memory leak issue. In our application we are auto reloading our page (not browser) every 2 minutes. When there is a reload we are doing ajax call and ...
user3719049's user avatar
0 votes
1 answer
77 views

NVD3: how to unset brush on default load?

I am using a stackedAreaWithFocusChart, in the example they have this line: chart.brushExtent([1225425600000, 1285819200000]); to set the default view. This is the chart type I want to modify: ...
tom's user avatar
  • 485
0 votes
0 answers
220 views

How to call d3 pie chart on button click in angularjs?

I am trying to display pie chart using d3.js charts in angularjs . As far as the examples i have seen so far implements pie chart on load . But here i want to display pie chart based on the response ...
ani's user avatar
  • 516
0 votes
1 answer
96 views

How to find click event in forceDirectedGraph in Angular-nvd3 chart

Iam working on Angular-nvd3 forceDirectedGraph to show data. I have plot the chart but unable to trigger click event only in forceDirectedGraph. My issue is when I click on any node i need to open a ...
User123's user avatar
  • 289
0 votes
1 answer
68 views

Creating semi circular a Gauge using NVd3

I have a project in which I am using nvd3.js and want to create a semi-circular gauge. How do I create it? I did try to use guage.js for the same but the problem I am facing there is that I cannot ...
Smriti Sharma's user avatar
1 vote
0 answers
52 views

Customising the multi bar chart?

I have a multi bar chart that needs to be customized in a way that each bar of a key data needs to be split into two bars. After the render I removed the rects and addded new multiple rect's each. ...
cooler's user avatar
  • 141
0 votes
1 answer
235 views

Hover on legend and hover on path effect in nvD3

I am using nvd3 for creating visualisation in my project. I have to create multiple different kind of charts including line chart. This is my fiddle: https://jsfiddle.net/ykga1jqw/ My code: // ...
Nitesh's user avatar
  • 1,550
0 votes
1 answer
57 views

Dots persist on D3 graph for angularjs

I am using NVD3 for my graphs and I have this issue where the dots that show up on hover will start to persist as you over over the line. Does anyone have any idea on how to make sure these disappear ...
Zach Starnes's user avatar
  • 3,198
-5 votes
2 answers
97 views

Create chart using one of the given javascript libraries

I'm trying to create a chart that looks like this using ChartJS, D3.js, NVD3 or c3.js but I'm having trouble. Is this even possible with any of these libraries?
Johnny Metz's user avatar
  • 5,935
0 votes
1 answer
56 views

How to fix problem with nvd3 events on firefox?

I need to get click position from this event: stacked: { dispatch: { elementClick: () => alert('stacked.dispatch'), }, }, While I have this option: useInteractiveGuideline: false. The ...
Andy Ivaniuk's user avatar
0 votes
1 answer
350 views

React-nvd3 show multiple lines on line chart

I'm trying out react-nvd3.js, and I have no problem rendering a line chart with a single series. However, I am not sure on how to render with multiple series on the same chart (same axis). I know ...
kinkeal's user avatar
  • 13
0 votes
1 answer
114 views

nvd3 export to img cropping image

im trying to export a NVD3 graph using this tutorials: http://www.coffeegnome.net/converting-svg-to-png-with-canvg/ SVG to Canvas with d3.js It works perfectly but my result image is cropped to 300 ...
Chico3001's user avatar
  • 1,963
0 votes
1 answer
149 views

How to plot time on the X-axis in non-ugly mode?

This is ugly: I need something that is not ugly. Time series are very usual, but I not see how to build a "plug and play" chart with ISO dates. Perhaps an equivalent question is "How to use d3-...
Peter Krauss's user avatar
  • 13.9k
1 vote
0 answers
55 views

Angular NVD3 Line Chart Zoom - On Drag visible outside chart region

Angular NVD3 Line chart Zoom, able to drag outside the chart region. Is it possible to limit display chart data alone? $scope.scaleGraphOptions = { chart: { ...
user3590357's user avatar
1 vote
0 answers
53 views

nvd3 multibar chart shows no data

I am trying to make my first nvd3 graph. var sample_data = [{ "key": "Stream1", "values": [{ "x": "A", "y": 10 }, { "x": "B", "y": 4 }] }, { "key": "Stream2", "values": [{ ...
Charlestone's user avatar
  • 1,260
0 votes
1 answer
83 views

Angular-nvd3(1.0.7) discreteBarChart's bar not show up

I copied all options and datasource from example . and the graph shows , but I can't see the bars . but if I mouse over it , it gave me a tooltips. so the bar is there , but I can't see it.. the ...
Neko's user avatar
  • 589
1 vote
1 answer
366 views

how to set color to Angular-nvd3 (1.0.7)

I'm working on an AngularJS 1.5.3 project , and I use Angular-nvd3(1.0.7). I have met 2 problems: 1,When I'm using a discreteBarChart , I need to assign different color to every column,like this:(...
Neko's user avatar
  • 589

1
2 3 4 5
37