How to separate hoverlabel property of x and y in Plotly - javascript

how to separate hoverlabel property of x and y? How to make x hoverlabel stick to bottom in plotly javascript as like on the picture?
Actually i done this, but hoverlabel has coupled x and y value.
var data = [
{
type: 'scatter',
x: [],
y: [],type: 'scatter',
line: {
width: 2,
color: '#D2AB67'
}
}
];
var layout = {
plot_bgcolor: '#F7F8FA',
paper_bgcolor: '#F7F8FA',
showlegend: false,
yaxis: {
title: 'Kurs złota PLN/1oz',
showgrid: false,
linecolor: 'black',
linewidth: 1,
mirror: true
},
xaxis: {
showgrid: false,
linecolor: 'black',
linewidth: 1,
mirror: true
}
};
Plotly.newPlot('myDiv', data, layout, {displayModeBar: false});
I was searching documentation, but but i didn't find a solution.

You need to set the hovermode accordingly in the layout settings.
hovermode - ( "x" | "y" | "closest" | false | "x unified" | "y unified" ). Default: "closest".
Determines the mode of hover interactions. If "closest", a single
hoverlabel will appear for the "closest" point within the
hoverdistance. If "x" (or "y"), multiple hoverlabels will appear for
multiple points at the "closest" x- (or y-) coordinate within the
hoverdistance [...].
const layout : {
hovermode: 'x',
// ...
};

Related

How to get label index on click in RGraph

I am using RGraph in our angular 7 application.
and able to show the 3d graphs and all.
I have a requirement to get index when user clicks on x axis labels.
Some times not able to update the graph data dynamically.(this issue is producing in when we deploy code in server but as a developer I have to fix it.)
please find in the below image.
Is it good way to remove and add same 3d graph for every user action so that overlapping will not come again.
I need x axis title and y axis title also.
If any one know kindly help me.
1.That's possible for a 2D chart by using two charts - the second positioned over the labels of the first. See this example:
https://codepen.io/rgraph/full/poEJKKm
There's an example of a 3D chart there too with the axes enabled.
<script>
labels = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
bar = new RGraph.Bar({
id:'cvs',
data: [8,4,6,3,5,4,2,8,6,4,2,2],
options: {
marginInner: 10,
xaxisLabels: labels,
xaxis: false,
yaxis: false,
backgroundGridVlines: false,
backgroundGridBorder: false
}
}).draw();
bar2 = new RGraph.Bar({
id:'cvs',
data: [1,1,1,1,1,1,1,1,1,1,1,1],
options: {
xaxis: false,
yaxis: false,
backgroundGrid: false,
marginBottom: 10,
marginTop: 215,
colors: ['transparent'],
variantThreedXaxis: false,
variantThreedYaxis: false,
yaxisScale: false,
tooltips: '\0',
tooltipsHighlight: false
}
}).draw().on('click', function (e, shape)
{
alert(shape.dataset);
});
</script>
bar = new RGraph.Bar({
id:'cvs2',
data: [8,4,6,3,5,4,2,8,6,4,2,2],
options: {
variant: '3d',
marginInner: 10,
xaxisLabels: labels
}
}).draw();
(Use the "change view" button to see the code)
Updating is just a case of setting the new data on the object:
myBar.data = [4,8,6,3,5,4,8,7,8,4,6,9];
And then calling the redraw method:
RGraph.redraw();
If you don't call the redraw method it won't change.
If you removing the chart from the ObjectRegistry too and there's not 1000 user actions then I suppose it would be OK. You can clear the ObjectRegistry with:
RGraph.ObjectRegistry.clear();
There are properties for that:
https://www.rgraph.net/canvas/bar.html#xaxis-properties
https://www.rgraph.net/canvas/bar.html#yaxis-properties
I've been tinkering with this and this code should work on the v5.26 libraries:
<script>
labels = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
bar = new RGraph.Bar({
id:'cvs1',
data: [8,4,6,3,5,4,2,8,6,4,2,2],
options: {
variant: '3d',
marginInner: 10,
xaxisLabels: labels,
backgroundGridVlines: false,
backgroundGridBorder: false
}
}).draw();
bar2 = new RGraph.Bar({
id:'cvs1',
data: [1,1,1,1,1,1,1,1,1,1,1,1],
options: {
xaxis: false,
yaxis: false,
backgroundGrid: false,
marginBottom: 10,
marginTop: 215,
colors: ['transparent'],
variantThreedXaxis: false,
variantThreedYaxis: false,
yaxisScale: false,
tooltips: '\0',
tooltipsHighlight: false
}
}).draw().on('click', function (e, shape)
{
alert(shape.dataset);
});
</script>

Is it possible to disable navigator(small series) but remains the extensible scroll bar,Highstock

I need to remain the functionality of extensible scroll bar, but I don't need overview navigator. Like :
I need the scroll bar(area 1) to still remains extensible, but remove the navigator(area 2).
This is a design of what I want:
demo you could quickly modify from :
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
var chart = $('#container').highcharts('StockChart', {
rangeSelector : {
enabled: false
},
title: {
text: null
},
navigator: {
enabled:false,//make it false , but the scroll bar is not extensible
outlineWidth: 0
},
scrollbar: {
barBackgroundColor: '#ccc',
barBorderWidth: 0,
buttonBackgroundColor: '#ccc',
buttonBorderWidth: 0,
buttonArrowColor: '#fff',
buttonBorderRadius: 3,
rifleColor: '#fff',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: '#ccc',
trackBorderRadius: 3
},
series: [{
type:'areaspline',
showInLegend: false,
name: 'AAPL1',
data: data
},{
type:'areaspline',
showInLegend: false,
name: 'AAPL2',
data: data.map(function(d){return [d[0],parseInt(d[1])*2 ]})
}]
});
});
});
Scrollbar can not be resized like Navigator, so I think what you really want to use is (2) Navigator and disable (1) Scrollbar. Here is simple example do to do: http://jsfiddle.net/dJbZT/183/
navigator: {
enabled:true,
outlineWidth: 0,
height: 14,
maskFill: '#cccccc',
series: {
data: [] // empty navigator
},
xAxis: {
labels: {
y: -20 // move labels outside the navigator
}
}
},
If the navigator should have background, you can add two dummy points for the series, one at the beginning of the original series and one on the end:
data: [
[data[0][0], 2],
[data[data.length - 1][0], 2]
]
Then just set color and fillOpacity for a series, to the color you want to achieve, and set yAxis.max below your dummy value (2 in my case). Working demo: http://jsfiddle.net/dJbZT/184/

Share tooltip between all series types

Working with tooltips in Highcharts I can see that not all type of series are included in the same tooltip. In the definition of my Highcharts object the property of tooltip look like:
tooltip: {
positioner : function (boxWidth, boxHeight, point) {
return {
x : point.plotX - 100,
y : point.plotY
};
},
shared : true
}
And how I am setting the tooltip property for each series is:
public getDefaultTooltip() {
return {
pointFormat : '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y} </b><br/>'
};
}
After read the documentation of tooltip I can see that shared property is not valid for series of type 'scatter', what is exactly the type of series that is not working for me. So, is there some workaround in order to make available all the data in the same shared tooltip?
in the example bellow I want to show all the series data in the same tooltip but the scatter serie is using a different popover. http://jsfiddle.net/rolandomartinezg/a6c4c4tv/1/
The ScatterSeries is defined in highcharts with noSharedTooltip = true. I think this is because the scatter series show both the x and y in their tooltips.
var ScatterSeries = extendClass(Series, {
type: 'scatter',
sorted: false,
requireSorting: false,
noSharedTooltip: true,
trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
takeOrdinalPosition: false, // #2342
kdDimensions: 2,
kdComparer: 'distR',
drawGraph: function () {
if (this.options.lineWidth) {
Series.prototype.drawGraph.call(this);
}
}
});
To get around this, you can use a line series instead of the scatter series with the lineWidth = 0. You also need to turn off the hover state for the series to avoid the line showing up on hover.
, {
type: 'line',
name: 'Average',
lineWidth: 0,
states: {
hover: {
enabled: false
}
},
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}
http://jsfiddle.net/a6c4c4tv/2/

JQplot - Stacked horizontal bars with only two facts

I want to render a very simple horizontal stacked bar with only two facts. Without any axes.
Like this: My target.
But the only thing i could do is this: My actuell Version.
The Problem is that when i only insert two values (e.g. "2" and "7") it only shows me one bar for the "7".And the second problem is the tick on the left side with these little lines. Dont know how to solve this. Any ideas ?
My Code:
$(document).ready(function(){
var s1 = [2];
var s2 = [7];
var s3 = [10];
plot3 = $.jqplot('chart1', [s1, s2, s3], {
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
// Put a 30 pixel margin between bars.
// barMargin: 30,
// Highlight bars when mouse button pressed.
// Disables default highlighting on mouse over.
highlightMouseDown: true
},
pointLabels: {show: true}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
},
xaxis: {
// Don't pad out the bottom of the data range. By default,
// axes scaled as if data extended 10% above and below the
// actual range to prevent data points right on grid boundaries.
// Don't want to do that here.
padMin: 0,
//max: 15,
}
},
axesDefaults:{
showTicks: false,
showTickMarks: false,
},
legend: {
show: false,
location: 'e',
placement: 'outside'
},
grid:{
drawGridlines: false,
borderWidth: 0,
shadow: false,
background:'#ffffff',
gridLineColor: '#FFFFFF',
},
});
// Bind a listener to the "jqplotDataClick" event. Here, simply change
// the text of the info3 element to show what series and ponit were
// clicked along with the data for that point.
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
It looks like the padMin: 0 setting on xaxis is causing the second series to be incorrectly displayed. If you remove that altogether it works as you want.
As for removing the grid line ticks, try adding this to the axesDefaults settings
tickOptions: {
markSize: 0,
}
So it will now look like this:
axesDefaults:{
showTicks: false,
showTickMarks: false,
tickOptions: {
markSize: 0,
}
},
If it doesn't work with just that, try using the canvasAxisTickRenderer, more details here: http://www.jqplot.com/tests/rotated-tick-labels.php

Set maximum bar width in ExtJS 4 column chart?

I have a 250px wide column chart, it looks great when there are 10+ items in the series, but when there's only 2-3, the bars are drawn really wide, which looks somewhat odd.
_____
| |
| |
-----|-----
I can set the width in the series config:
{
style: { width: 25 }
}
This works, but the thinner bars are still left-aligned with their previous position, so they don't match up with the axis tick and label.
Like so:
_
| |
| |
-----|-----
I don't want to change the axis spacing, I want to end up with widely-spaced, 25px bars (that are correctly centered on the axis tick):
_
| |
| |
-----|-----
Any ideas?
renderer: function(sprite, record, attr, index, store) {
return Ext.apply(attr, {
fill: color,
width: 50,
x: Math.max(attr.x, attr.x + (attr.width - 50) / 2)
});
}
Maybe a bit to late but this is my solution
renderer: function(sprite, record, attr, index, store) {
return Ext.apply(attr, {
fill: color,
width: 50,
x: Ext.getCmp('chart_id').axes.items[1].inflections[value][0] - 25
});
}
In this example I read the x axe and find any given point (label stripes) than I looped though my bars, you can use a count or something and use in instead of value. Hope it works!
//try like below
series:[
{...
style:{
minBarWidth:5,
maxBarWidth:5
}
},
{...}
]
I think the problem is that the chart you are looking for is Cartesian one and the column chart doesn't work for you because it hasn't any exact X value.
So, I simulate the Cartesian chart (like Line chart) to look like the column chart like this:
It's a trick somehow but it works fine for me.
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['min-X','max-X']
}, {
type: 'Numeric',
position: 'left',
fields: ['min-Y','max-Y']
}],
series: [{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line1-X',
yField: 'line1-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line2-X',
yField: 'line2-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line3-X',
yField: 'line3-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line4-X',
yField: 'line4-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
}]
And the data:
{
line1-X: 2, line1-Y: 0,
line2-X: 5, line2-Y: 0,
line3-X: 5.5, line3-Y: 0,
line4-X: 8, line4-Y: 0,
min-X: 0, min-Y: 0,
max-X: 10, max-Y: 100
},{
line1-X: 2, line1-Y: 40,
line2-X: 5, line2-Y: 80,
line3-X: 5.5, line3-Y: 60,
line4-X: 8, line4-Y: 100,
min-X: 0, min-Y: 0,
max-X: 10, max-Y: 100
}
But in this approach you have to know the maximum number of Columns(Lines) you have. And each time insert Zero(0) data to one you don't want to show. If you don't know the number of Columns(Lines) you have to create them dynamically.
This is my idea and it works the way I want it. Maybe it helps you to find your solution.
try using the "gutter" property to set the gap between the column.

Categories

Resources