I'm trying to disable the tooltip for the line serie of my chart and leave the one of the bar serie. I can't really see how I can do it.
The problem I have with both series' tooltips enabled is that I cannot see the tooltip of the bar serie because it's always selecting the one from the line which is closer. Maybe it's possible to trigger the tooltip if the mouse is closer to the point? at the moment it's triggering it at around 10-20px away from the point.
This should do it:
var chart = nv.models.linePlusBarChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
...
;
chart.lines.interactive(false) // add this line
Related
I want to draw Graphics elements in an amCharts 5 stock chart, for example Lines. I would like to use the Line class but have only managed to draw using the lower level line api below. I have not managed to find anything in the documentation about how to anchor Graphics elements to bars.
The lines should be anchored to bars, ie:
start on a certain date and end on another date,
are horizontal,
should move with the chart in zoom and pan events,
there can be hundreds of lines on the chart.
What I have done so far is to take the stock chart example https://www.amcharts.com/docs/v5/charts/stock/ and now I want to draw lines anchored to bars, which I'm failing to do. I did manage to draw a line but it is not anchored to any bar and does not move on zoom or pan.
How can I anchor Lines to bars, please?
Here is the code to draw a horizontal line:
mainPanel.plotContainer.children.push(am5.Graphics.new(root, {
stroke: am5.color(0x000000),
fill: am5.color(0x990000),
x: 20,
y: 70,
centerX: am5.percent(50),
centerY: am5.percent(50),
position: 'relative', // this did not do anything
draw: function(display) {
display.moveTo(0, 50);
display.lineTo(50, 50);
},
}));
I have few bar charts in my dashboard where i'm displaying labels on top of the bar. My users requesting to have thousand seperators for the labels.
The reason is the numbers are like over 7 digits and more for each bar.
Is there any workaround to achieve this functionality?
Here is my code:
Chart
.width(1700)
.height(200)
.margins({top: 5, left: 40, right: 20, bottom: 30})
.transitionDuration(1000)
.dimension(dateDim)
//.formatNumber(d3.format(","))
.group(dateGroup)
.renderLabel(true)
.brushOn(true)
.elasticY(true)
//.centerBar(true)
//.x(d3.time.scale().domain([minDate,maxDate]))
.yAxisLabel("Trades per day")
.xAxisLabel("Days")
.ordinalColors(['#215979'])
.x(d3.time.scale().domain([minDate, d3.time.day.offset(maxDate, 1)]))
.yAxis().tickFormat(d3.format('s'));
Chart.xUnits(function(){return 30;});
Chart
.on("postRedraw", function(chart, filter){
window.globalActiveFilters.SelectedTradeCount=chart.filters().join(",")
});
The labels on top of the bars are controlled by .label().
In the case of bar charts, the default behavior is overridden to use the total Y value of the stacked bar:
_chart.label(function (d) {
return dc.utils.printSingleValue(d.y0 + d.y);
}, false);
(source link)
You can specify your own label accessor which uses d3.format as suggested by #REEE, supplying it the total stacked value:
.label(d => d3.format(',')(d.y0 + d.y1))
Example fiddle.
Use d3-format, you can find the relevant docs here: https://github.com/d3/d3-format
Example use case (as shown in link above):
d3.format(",")(20000)
-> "20,000"
d3.format(",")(200000000)
-> "200,000,000"
It seems like the height and fixedBarHeight cant both be used in a rowChart. Ids like to use fixedBarHeight so all the bars have the size I want, and the chart to be in a scrollable div so that the numbers of bars define the height of the chart. Is this possible?
#ialarmedalien made this block, which introduces a dc.axisChart to separate the axis of the row chart from the actual chart.
Then you can use conventional overflow-y: auto on the row chart div.
Here is a related issue on dc.js.
The dc.axis addon mentioned by #Gordon will solve the problem with the axis in a scrollable div, but not the problem asked. By default, the axis will only appear at the bottom, not before.
To solve this, add one div after the row chart div, this div will contain a copy of the axis.
<div id='row-axis'></div>
Then initialize this axis in the javascript
dc.axisChart('#row-axis')
.margins({ left: 10, top: 0, right: 10, bottom: 10 })
.height( 50 )
.width( 300 )
.dimension( dimension )
.group( group )
.elasticX( true );
Then change the margin of the row chart to 'glue' correctly with the axis. They also must have the same width.
.width(300)
.margins({ left: 10, top: 0, right: 10, bottom: 0 })
Then , in the css
div.dc-chart {
float: none;
}
Dont forget to include overflow-y: auto for the row style. Then you get:
This however doesnt solve the gap problem if your height is too large (or too small) compared to the fixedBarHeight.
But now your margin is zero, so the proper height is easy to calculate (but you must pass the gap value, which has 5 by default). Assuming N=chart.group().all().length, then do:
.fixedBarHeight(X)
.height(X*N + gap*(N+1))
Which will give you:
Worth mentioning that at this point you dont even need the fixedBarHeight anymore. Simply setting the height using XN + gap(N+1) will result in dc auto setting this value to X.
Based on: https://bl.ocks.org/ialarmedalien/0a4bf25ffc0fb96ae569a20f91957bc1
Just add style="overflow-y: auto; height: 300px;" in your rowchart div. It should work.
I use the library C3.js to build a graph on the page. The graph should occupy the entire width of the screen (because I hidden legend and axis), but chart zone always has an indent about 1% from window's width.
Can I make this?
Example
axis: {
y: {
show: false
},
x: {
show: false
}
Very Strange, you can put negative padding to get rid of it, I have no idea why its there either. you can add padding: { left: -20, right: -20 } to your chart object as quick hack around.
https://codepen.io/anon/pen/oBxPPL
c3js Padding Options
Is it possible to specify a label for the second y-axis in an NVD3 (1.8.3+) MultiChart? The following correctly sets a label on the left-hand side of the graph, but not the right:
chart.yAxis1.axisLabel('Liters');
chart.yAxis2.axisLabel('Gallons');
I had the same issue, turned out that the right side was being cut off. I solved it by including a margin when I defined the multichart model.
`var chart = nv.models.multiChart()
.margin({top: 30, right: 90, bottom: 50, left: 70})
.color(d3.scale.category10().range());
That fixed the problem for me, might be worth checking it out. The multichart example on github also has a .margin setting in their code.