We Keep Coding

chartJS: How to return the closest x-axis label on click

I have a chartJS line graph, with x-axes labels being the last 72 hours on each hour mark ( for example: [8:00am, 9:00am, 10:00am,...]). Is there a way I can return the closest xAxis label on click? I have found a way to return the x-y coordinates of the graph, but these coordinates are in pixels, and the graph is able to resize its self based on the size of the browser window. If I were to take into account for the current browser window size, and the number of labels displaying, I could calculate which label would be closest, but I am hoping that there is an easier way to do this.
One Idea I have is to return the label that the "ToolTip" is on, on Click. This would be logically equivalent, as in my options I have the tooltip always display for the closest tick whenever the mouse is on the graph. Would it be possible to return the tooltips label onclick?
My ultimate goal is to have access to the nearest x-axis label (as a string) when I click on the graph. Is this possible?

You can add a custom onclick function to the chart and then ask chartjs for the elements at that location.
See this issue for the complete answer with example: get yLabel value onclick chart js
document.getElementById("myChart").onclick = function (evt) {
var activePoints = myChart.getElementsAtEventForMode(evt, 'point', myChart.options);
var firstPoint = activePoints[0];
var xLabel = myChart.data.labels[firstPoint._index];
// Do things with your x label
};

Custom gridLines and Axes Chartjs

I am trying to design a CDF Chart using chartjs to show probabilities in a graph. Basically, I will always have 100 points starting at 0 to some max number which I calculate beforehand and I want to generate the charts as I attached. Smooth and not many gridLines. I tried using chart type "line", yet it is far off.
Could you please help me out to configure the chart correctly.
Examples of what I am looking for:

This is a solution without autoSkip, using gridline colour options to hide unwanted x axis gridlines. (sorry about my British spelling of 'colour'!)
I can't use autoSkip since my time/x axis labels show new Year, Month, Date only once and I couldn't work out how to not skip the particular labels which indicate a new month, for instance. I finally found that you can define gridline colours in an array, so my solution is to create a gridline colour array, setting the chart background colour to the gridlines I want to hide. In my case, I already send a list of labels with empty values for when I don't want a label and gridline, just a datapoint.
var labels = data3json['labels'].split(',');
//set gridline colour to background when label is empty:
var xaxis_gridline_colours = [];
for (var i = 0; i < labels.length; i++) {
if (labels[i].length > 0) {
if (i == 0) {
xaxis_gridline_colours.push("#cccccc"); //x and y axis!
} else {
xaxis_gridline_colours.push("#dddddd"); //visible gridline
}
} else {
xaxis_gridline_colours.push("#ffffff"); //invisible gridline
//or call a chart background colour variable like:
//xaxis_gridline_colours.push(chart_bkg_colour);
}
}
Later in the code:
chart = new Chart(ctx24, {
options: {
scales: {
xAxes: [{
gridLines: {
display: true, //default true
color: xaxis_gridline_colours,
etc

First about the gridLines, you can in your chart options change the stepSize of your xAxes (put it to 10 for instance) so you will have 10 times less vertical grid Lines (since your xAxes stepSize seems to be 1 by default).
If the big points are bothering you, when you create your datasets you can change their pointRadius to 0; this way no points displayed just a smoothline.
Finally you can change the color of the line of each dataset by setting the property borderColor.
Take a look at this page for more customization : http://www.chartjs.org/docs/latest/charts/line.html
Hope this helps.

I have noticed that most of you add the line styles only via code. I just spend 1h looking for the settings, as I change it once, but then I couldn't change it again.
How to do it. Post on Stackoverflow pointed me in the right direction.
Charts grid lines style
Line: this.chart1.ChartAreas[0].AxisX.LineDashStyle.Dot
Go to Properties->Chart->Chart Areas and click on 3 dots (...) next collection.
Properties
In Collection, go to Axes and again click on 3 dots (...) next collection.
Axes Collection
You will have 2 Axis: X and Y. Select each Axis and go to the required section to change properties. Be careful. They are well hidden, but I tried to highlight all the options. Of course, to perform the custom modification, you will have to code it.
Axis Collection Editor

Align svg text inline with d3.js legend

I'm trying to use Susie Lu's legend plugin.
Here is a plnk of work so far;
http://plnkr.co/edit/wrOWPYu4PAqwr8f5OOjw?p=preview
Image below is what I would like to achieve (just layout, content/colour doesn't matter)
I've tried the standard float:left + display: inline on the classes attached to the text/rectangles but it didn't work for me. Maybe I was making a mistake. I'm not sure If I should be doing this inside the d3 script or in the css file anyway?
Hope this is a simple fix - any help is much appreciated!
Thanks

Those attributes (float:left + display: inline) only work on html elements, what the legend library here produces is svg
It's possible, but needs a little bit of work
http://plnkr.co/edit/YRFRWEtMFDmje06Mg5KY?p=preview
var cells= d3.selectAll(".cell");
var cellGap = legendLinear.shapeWidth()+(legendLinear.shapePadding()/4);
cells.select("text")
.attr ("transform", "translate("+cellGap+" 13)")
.style ("text-anchor", "start")
;
var offset = 0;
cells.each (function(d,i) {
var d3sel = d3.select(this);
var textWidth = d3sel.select("text").node().getComputedTextLength();
var offsetInc = textWidth + legendLinear.shapeWidth() + legendLinear.shapePadding();
d3sel.attr("transform", "translate("+offset+" 0)");
offset += offsetInc;
});
This firstly moves the text element for each legend 'cell' to the right of the colour swatch rather than below.
Then it moves the g elements that hold the label and swatch horizontally apart dependent on the width of the label (and the swatch and the declared padding) using .getComputedTextLength() and a running total for the offset.

Adding a label to the left and to the right of a bar in highcharts

I have a normal vertical bar chart in highcharts with 2 bars. These have a dataLabel each. I am able to display the datalabels in the (vertical) middle of the bar fairly easy.
My issue is that I need to have the left bar display the label left of that bar (outside the bar, on the chart, giving about 5px padding between the label and the bar).
I need the same with the right bar, except being on the other side.
I have tried doing something like
$("#id").find(".highcharts-data-labels text");
//... loop and then
var newattrx = parseInt($(textElement).attr("x")) + 70;
$(textElement).attr("x", newattrx);
But this works really sloppy and only for the display to the right.
Any suggestions?
UPDATE: Here is the fiddle: http://jsfiddle.net/jj14a1ny/

There is probably a better approach out there, but I'll put this here in case nobody posts one.
Using your existing method, you can do a check for which label you are processing, and specify the offset as positive or negative accordingly:
var x = i == 0 ? -75 : +75;
Example:
http://jsfiddle.net/jlbriggs/jj14a1ny/1/

How to set custom width of bar in NDV3 Discreate bar chart

Am trying to build vertical bar chart using nvd3 charts.
Problem :
If chart has single record, bar width reaches 3/4 of the chart width.
Question :
How to change width of the bars in Discrete bar chart?
Have attached chart please guide me..

If you look at the source here. You'll see that the width of the rectangle is calculated based on the number of items using rangeBand. There doesn't appear to be a way to set the width of the rectangle though the library's API.
If you didn't want to patch the library, you could create additional fake bars with zero data and provide a label formatter that would return an empty string if the value was zero, but that assumes zero is not a valid number in your data set.

Use the follwing code to set the width
dispatch: {
renderEnd: function (e) {
d3.selectAll("rect.nv-bar").attr('rx', 4).attr('ry', 4).attr('width', 15)
}
}
or you can use
groupSpacing : 0.57,