We Keep Coding

Full height TimeMarker in react-timeseries-charts

I am trying to modify the cycling example from the react-timeseries-charts repository. I would like to add vertical lines that span across all rows (much like the cursor tracker does).
I have added the TimeMarker component to the charts array:
charts.push(
<LineChart
key={`line-${channelName}`}
axis={`${channelName}_axis`}
series={series}
columns={[channelName]}
style={style}
breakLine
interpolation={"curveStepAfter"}
/>
);
charts.push(
<TimeMarker
time={4500}
/>
);
This displays a vertical line on all plots as expected however the line doesn't span the full height of each ChartRow so visually looks disjointed (see image).
I have tried playing around with each of the props on TimeMarker but can't find any that alter the line height and can't find anything in the docs either.
Any help would be much appreciated.
Cheers,
P
edit: image upload doesn't seem to work, hopefully it's clear what I mean. There's about 10px of whitespace between each chart row where I would like the line to continue to produce a single joined up vertical line across all rows.

In Highcharts, is it possible to add a border to the legend symbol?

In highcharts, to configure the legend symbol (the small square in front of each legend item), there are four properties can be configured:
symbolHeight, symbolPadding, symbolRadius, symbolWidth.
Is it possible to add some extra properties to it? Like borderWidth, borderColor...?

symbolHeight, symbolPadding, symbolRadius, and symbolWidth are merely used to adjust the size and placement of the symbols in the legend. To further change the appearance of these symbols, you should look at the options for series.marker.symbol instead (see http://api.highcharts.com/highcharts#series<line>.marker.symbol).
There's a demo fiddle the Highcharts team created that shows you a bunch of options for marker symbols, each of which shows up in the legend as well: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-marker-symbol/
Hopefully, one of these options should be suitable for you.

Alter first vertical grid line in nvd3

I want to remove (or make effectively hidden) the first vertical line in the grid for an nvd3 chart. I thought it was a problem with my chart, but after testing it, I realized it seems to be a more general problem.
I tested it by running the line:
d3.selectAll('.tick, .nv-axislabel, .nv-axis text').attr('fill','#999999')
in the console, at the simplest line chart I could find: http://nvd3.org/examples/line.html and it still didn't work! It changes all the lines except the very first vertical line. I'm baffled, I've tried every combination of classes with stroke, fill, opacity, etc - I can either affect the entire svg (with opacity), or nothing. Anyone have any ideas?
EDIT:
I should have specified this originally, I apologize - I do not want to remove the Y axis entirely. I still need the label and the tick marks - I just want to remove that one vertical line (or at least lighten it - it is much darker than the rest of my chart).

Going by your comments:
You don't want to see the " the first vertical line in the grid for an nvd3 chart"
Which is the y axis:
Two ways to achieve that:
Option1
var chart = nv.models.lineChart()
.margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(false) //hide the y-axis
.showXAxis(true); //Show the x-axis
Option2:
Since in your example you are going for a CSS option
d3.selectAll('.nv-y').attr('display','none')
I will prefer Option1
EDIT post your clarification, you wish to make the y axis line light you can use:
d3.selectAll('.nv-y path').attr('opacity','0.1')
or if you want to hide it completely
d3.selectAll('.nv-y path').attr('display','none')

One solution is to specify an array of tick values that you want to use for each axis. Use axis.tickValues([values]) to explicitly declare which XAxis ticks you want for your graph. So you could pop .tickValues([1, 2, 3, 5, 8, 13, 21]); into either the chart.xAxis or the chart.yAxis, and ticks would only appear from the corresponding values in the array. In your case, you would want to put it in the chart.xAxis variable. However if you want to have a dynamic chart, explicitly declaring the tick values would pose a problem once the data is updated in the graph. If on the other hand you are using static data, this is a pretty easy fix. I've tested this solution in their live code editor and it seems to do the trick.
Refer to https://github.com/mbostock/d3/wiki/SVG-Axes#ticks to see some other directives that could be of use.

Highcharts paint zero axis black

I have a Highchart bar chart with negative values (with the bars then going downwards). Now I would like to paint a black line for y=0 like so: .
I haven't found a trivial way to do this and I would like to avoid directly modifing the SVG or adding a fake line chart or something. Maybe someone knows better way? I've already played around with (minor)tickInterval and (minor)gridLineColor but that wouldn't solve my problem.

you can use plot lines for this like shown in this example http://jsfiddle.net/4rpNU/
yAxis:{
plotLines:{}
}
here is the api reference for it http://api.highcharts.com/highcharts#yAxis.plotLines
Hope this will be useful for you :)

morris.js dashed grid lines

I am trying to customize the grid lines for morris.js to have a dashed style similiar to the revenue graph in http://dribbble.com/shots/947782-Freebie-PSD-Flat-UI-Kit/attachments/107093, Is this even possible? It seems that the documentation is not very complete, gridLineColor is not listed as an option yet it does change the color when I add it to my graph. Morris.js seemed to be highly recommended but I cant seem to adjust simple things like this.
I would also like to have each grid line the same weight and not have the center line emphasized while the others lighter. I cant seem to find anything in the documentation for that either.
Thanks for any help!

There doesn't seem to be an option yet for this in morris.js but I was able to edit the uncompressed morris.js file to add an option for dashed grid lines. Simply add .attr('stroke-dasharray', this.options.gridDashed) to the end of line 508. You can then add the option gridDashed: '--' to the graphs you would like dashed grid lines on!

Here is the line that needed changing in Graeme's answer:
Grid.prototype.drawGridLine = function(path) {
return this.raphael.path(path).attr('stroke', this.options.gridLineColor).attr('stroke-width', this.options.gridStrokeWidth).attr('stroke-dasharray', this.options.gridDashed);
};