We have a LineChart in Recharts, and want to add labels to the lines themselves, but noticed that the label attribute of applies the label to every single datapoint of the line instead of just to the line itself.
Is there a way to add a label to the entire line similar to how reference line works?
Related
I am using Summernote Text Editor but facing a Line height change after applying Bullet point to a particular line or Para.
Do we have any option to set default Bullet Line Height?
I'm using nvd3 to plot a line graph. As part of customization, is there a way to highlight a specific line path as in below image on top of B4. Any tips are welcomed.
Cloning the existing path and customizing the path d attribute, stoke-width, color did the job.
I have a run-of-the-mill nvd3 line chart. Sometimes the data represented by the chart is patchy. I would like to be able to style part of the lines differently to represent this, such as in this example:
Here, the dots are joined by a dashed line when far apart and a full line when close together. Is it possible to apply stroke-dasharray only to certain parts of a path, or do I have to trick nvd3 into creating a new line for each segment where the styling changes?
You can't apply stroke dasharray to part of a path, but you can create a very long stroke dash array that equals the length of your path and carefully calculate the locations of the dashes in JavaScript so that the dashes line up with the part of your path that you would like dashed.
I'm using Segment Plot to show multiple lines on the chart. How can I make these lines have arrows on their ends?
You can do this with some SVG + DOM hacking. You can define a "marker element" that can be placed at the beginning, middle or end of a line (see http://tutorials.jenkov.com/svg/marker-element.html for details on markers).
This means manipulating the SVG generated by Plottable. To get the underlying DOM elements, you need to get hold of the d3 "selection" representing each line.
Add a marker definition to the <svg> element where you are rendering the plot. I am pretty sure plottable won't overwrite entities already inside, but if it does you can always add it after rendering the plot.
Use Segment#entities to get all "PlotEntity" objects from the plot (http://plottablejs.org/docs/classes/plottable.plots.segment.html#entities).
Use the PlotEntity#selection property (http://plottablejs.org/docs/interfaces/plottable.plots.plotentity.html#selection) to get the set of DOM elements representing each segment.
The "Selection" interface is just a d3 selection (https://github.com/mbostock/d3/wiki/Selections). You can then add the appropriate "marker-end" attribute to each element, which should give you the arrow heads you want.
On the off-chance these lines are vertical, I have a super easy hack. Use .symbol() to create a scatter plot where the points are either up or down arrows, and place them at the ends of the segments.
Otherwise, you may have to draw the arrows yourself. You can get the pixel locations of the ends of the segments like this:
locX = xScale.invert(endpointXValue)
locY = yScale.invert(endpointYValue)
And then you could append an arrow shape to the foreground (see the crosshair container in this example)
I'm using nvd3 to draw a chart, But I need to add middle line manually.
I use the lib's axis to translate a 'g' to draw the middle line, but the lines for y-axis 'cut' the vertical red line as the below, so can it set css like 'z-index' to above the line?