You are treating your single
path like it's two separate elements. It's just one element and your
area call (and style) is overriding your
line call (and style). If you want to style them different, plot a line and an area.
svg.append("path") .datum(data) .attr("class", "area") .attr("d", area); svg.append("path") .datum(data) .attr("class", "line") .attr("d", line);
- In d3, how do I apply a style to my line chart for both the line and the area under the line?
- How do I implement d3's enter update exit pattern for an area chart with focus and context?
- How can I apply a clipPath in SVG with multiple paths and NOT clip out the area between the paths?
- D3.js: how to decide both the area and the color of each square by the size of each content in treemap?
- Time in x-axis and data for the y-axis for line chart in d3.js doesn't match/show with what (data) is on JSON
- How to rotate the text labels for the x Axis of a nvd3.js line chart
- How to synchronize scatter points and line chart during an update to the data?
- D3.js: How can I give the same style to Top and Right line of a grid with the same style than grid lines?
- Color the area formed between Line Chart and Threshold line
- How do I get both a line and area styled in my d3 line chart?
- How to apply the the enter() and data() methods for ds3 in-memory data
- D3.js: How to get the computed width and height for an arbitrary element?
- MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
- how to style style line chart points in c3js
- how to add legend to a pie chart using D3js? And how to centralise the pie chart?
- How can I plot positive and negative values for both axes in a scatter plot with d3?
- How do I get my area filled beneath my d3 line chart to be a gradient?
- How to plot animated line chart using d3 while the data table is required to be updated every 1 second?
- How can I connect two parent node into one child node and how to make a tooltip for each node in the tree pragmatically? in D3 js (SVG)
- How to style slider on chart in D3.js and show label of dynamic y-value?
- How to apply tooltips for dc.js chart after chart is rendered
- Make a chart with area charts having both positive and negative y axis in dc or d3.js
- How to change the viewfinder (focus chart) of a NVD3 line chart programmatically?
- D3: How to use exit().remove() for Multi-Series Line Chart
- Error in A Simple D3 Line chart with Legend and Tooltips for D3v 3.5.13
- How to modify axis labels in d3 for a stacked bar chart when the axis labels are mapped as part of the scale's domain
- How to create Stacked Line Chart D3, Multiple Y Axis and common X Axis
- How to apply "background: repeating-linear-gradient" style for rect using d3.js
- How to apply rotate transformation and don't change the coordinates system in D3.js?
- d3v4 checkout chart - making sure the color scheme is correct for the legend and circles
More Query from same tag
- How to display D3 Color legend horizontally and not vertically
- Use D3 with Angular JS
- d3.js foreach loop on all the paths contained in a svg
- d3's tree layout with d3.nest() result
- Plot multiple lines in a for loop in d3
- How to stop d3.histogram() trimming leading and trailing empty bins
- How do I create a custom force that constrains nodes to a specific area within an SVG?
- how do I labels to the axis in this d3 example
- event listener on svg with d3.mitchTree.boxedTree
- How to get the same text of each elements in heat map as the y axis label?
- Angular 6 compile template runtime
- d3 - amending arrays
- How can I draw pie chart with custom color in d3.js
- Cannot have multiple charts in one HTML page - d3
- Mimicking an audio waveform with d3
- Line Chart with different line colors in d3
- Adding image in d3.js
- How to proportionally increase the size of X axis which uses d3.scaleTime?
- Having trouble panning and zooming on my d3 map
- d3 date/time plotting out by 100 years
- Add (second) x axis to scatterplot to display group information
- d3.js y-axis not displaying months correctly
- Where is this fill function defined?
- How can one scale GIS data in d3.js?
- dc.js: using dc.dataCount counts in other d3 charts on page
- Unable to supdate chart when switching dataset on button click
- Is it possible to skip the inital transitions in D3 force layout?
- d3 - sine wave with circles, the problem is that circles are overlapped in curves
- How to blink nodes after successfully get position of nodes?