1,813 questions
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 ...
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-...
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">
<...
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 &...
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 ...
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?
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 ...
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....
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 ...
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 ...
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="...
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....
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?
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),...
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 ...
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: { ...
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 ...
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.
...
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",...
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 ...
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 ...
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 ...
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://...
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 ...
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 ...
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....
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/@...
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 ...
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 ...
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/...
-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 ...
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?
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 ...
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 ...
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:
...
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 ...
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 ...
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 ...
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. ...
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:
// ...
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 ...
-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?
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 ...
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 ...
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 ...
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-...
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: {
...
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": [{
...
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 ...
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:(...