I am trying to disable the y value from being shown when the mouse hovers over a circle in nvd3 Bubble/Scatter chart. The live code is here. I tried this
var chart = nv.models.scatterChart()
.showDistY(false)
but it only makes the line to the y axis disappear and not the y axis value. How do I disable the y axis label from being shown when the mouse hovers over the circles/bubbles?
You can set the y tooltip content to null to achieve this:
var chart = nv.models.scatterChart()
.showDistY(false)
.tooltipYContent(null);
Related
I have created a subplot with plotly.JS , x axis is shared for each graph as given in the below picture.
I want to show the x axis values for all graphs in the subplot instead for showing it only for graph at bottom. I achieved this using anchor attribute, but the graphs are not aligned well. Look at the below picture, here 600 of graph2 is not positioned exactly to the other two graphs.
I want all the graph to share x axis as well as show the x axis values on each graph.
Hi on click of a button i simply want graph to be at 0,0 position with zoomed out, basically its a reset button.
Is it possible? on which element can i do that?
Will it be :-
d3.select('svg').select('g').transition()
.duration(1000).attr('transform', "translate(0,0)scale(1)")
But above moved whole graph including x and y axis and just zooms it out. I want only elements inside plotted area to change like lines, dots, values on x and y axis.
Please help.
JSFiddle
Basically you just need to set all back to position (0,0) and scale 1.
You should implement a way to centralize all input controls.
http://jsbin.com/niqara/2/edit?js,output
function reset(source) {
d3.select('g').transition()
.duration(750)
.attr("transform", "translate(0,0)scale(1)");
zoomListener.scale(1);
zoomListener.translate([0, 0]);
}
I was able to achieve "reset" (moving graph elements to 0,0 and zoom out to initial) using just below lines:-
function resetGraph(){
zoom.scale(1); //Zoom out to this scale
zoom.translate([0, 0]); //move/drag chart to 0,0 xy position
zoomed(); //Handler that updates all elements after zoom performed
slided(); //Optional- to update slider which works to zoom in and zoom out
}
Basically all this can go in a function and can be called anywhere or on click of a button to reset graph.
I'm working on makin a graph like this in highcharts:
But I have problems making the green red yellow background colors based on y and x axis.
This is an example I have found but it's only based on the y axis: jsfiddle.net/tK7ux
And I want to use plotBands on both X and Y at the same time, if possible.
Maybe there is another way than using plotBands ? i have also looked at Renderer functions and making an rectangle, but the problem was that it is the position not is based on the Y and X axis.
I'm trying to display axis for a grid based chart (heat map) to display correctly. I can get them into the right alignment (centered with each grid whether it be row or column), but they are on top of the grid where I want to have them displayed outside of the grids.
Here's what I have so far: http://jsbin.com/hihepo/8
Provide some margins around and translate your chart's g wrapper. You have margins defined, but they are never used, so you chart stretches until svg element borders and there's no more space around.
Use .orient('left') for y axis and .orient('bottom') for x axis orientation. See docs for orient method.
Adjust the transform and text-anchor of your x axis labels (or change the translation of their g wrapper).
Here's a demo for x axis labels.
I want to display custom text as y axis label.
I have attached the sample screenshot.
Have you tried something like this?
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
tickFormat: Rickshaw.Fixtures.Number.formatKMBT
});
yAxis.render();