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);
},
}));
Related
When creating a bubble chart, such as https://www.amcharts.com/demos/bubble-chart/, is it possible to ensure the chart area/grid is square without specifying the chart div width and height? I'm hoping it could be somewhat responsive. No matter what the window size, the chart 's grid is square. It would need to take into consideration any axis labels.
I'm using React/TypeScript. Thanks!
After struggling with amchart settings to no avail, the following solution works. However, seems like there should be away to do in with chart settings.
This article explains how to maintain a specific aspect ratio for images. I simply adopted it for the bubble chart.
<div style={{ position: 'relative', paddingTop: '93%' }}>
<div id={chartId} style={{ position: 'absolute', top: 0, left: 0, height: '100%', width: '100%' }}></div>
</div>
Create a container div with relative positioning and the top padding to the correct aspect ratio
Create the chart div as a child with absolute positioning
Render the page
Take a screenshot, paste it in your favorite image editor
Measure the pixels
Recalculate the top padding
For my chart, which has axis text on the left and bottom, 93% was perfect. Now, no matter the page width or device, the grid is always square. HTH.
I'd like to use images (icon or svg) instead of the default rectangles for the legend of the pie chart.
Would it be possible to do this in dc.js?
For example:
Many thanks.
This feature isn't built-in, but it's usually easy to "escape to d3" and customize your charts as you see fit.
In this case, we want to wait until the chart is rendered and then replace the rectangles with images:
chart.on('pretransition', function(chart) { // 1
var items = chart.selectAll('.dc-legend .dc-legend-item'); // 2
items.selectAll('rect').remove(); // 3
var images = items.selectAll('image').data(function(x) { // 4
return [x];
});
images.enter().append('image').attr({ // 5
width: 25,
height: 25,
href: function(leg) { return _icons[leg.name]; }
});
console.log('items', items.data());
});
Wait for chart render/redraw
Select the legend items
Remove any rect under each item (if it's a line chart you'll have to look for line instead
Select any existing images (the "trick" of returning a single-item array is so that we can cleanly replace anything which was there, and not keep adding more images)
And set up the image - in this example I'm using some the first SVG icons I could find on a CDN; we map stack names to SVG URLs using an object.
Finally, we also need to set the legend's item height to match the image height:
chart.legend(dc.legend().itemHeight(25));
Example output:
Example fiddle: https://jsfiddle.net/gordonwoodhull/Lss5wsz6/9/
I have a Kendo UI (Telerik) bar chart with long label names. When I set the label rotation to anything outside of 0,180,90,360 the labels slant but they use the center of the text as the slant point instead of the start of the text. This causes all the labels to be off by a full bar.
http://snag.gy/m2XxJ.jpg
Is there a way to get the chart to use the start of the label as the rotation point instead of the center?
The only way I've gotten the labels to line up properly when using rotation, is to also set the padding.
Sample categoryAxis
categoryAxis: { field: 'name', labels: { rotation: -60, padding: { right: 10 }}}
JSbin sample http://jsbin.com/zoloc/1/edit
Kendo Documentation http://docs.telerik.com/kendo-ui/api/dataviz/chart#configuration-categoryAxis.labels.padding
You can use both rotation and margin to arrange the category axis text like this,
.CategoryAxis(axis => axis
.Categories(model => model.StudentName).Labels(labels => labels.Rotation(330).Margin(-5,45,0,0).Visible(true))
.MajorGridLines(lines => lines.Visible(false))
.Line(line => line.Visible(false))
)
Response from Telerik:
You have a valid point. Excel for example rotates the text around its left edge.
We'll look into this issue, but for the moment I can only suggest the multi-line option in the upcoming Q2 release.
You'll be able to split the labels by using a new-line character:
categories: ["J.R. SIMPLOT\nCOMPANY", ...]
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
Is it possible, using dc.js, to construct a bar chart where the stacks are not placed on top of each other? Currently, my code produces charts that look like this:
Instead I'd like each of the stack bars to start from y axis and not from the value where the previous stack value ends. This may/will lead to the bars overlapping, so perhaps adding transparency will help here. A simple css rule will probably work here:
.dc-chart rect.bar { opacity: 0.75; }
You likely want to build a composite chart that includes a bar chart for each category.
You can build a group for each color in your chart like this:
usaGroup = categoryDimension.group().reduceSum(dc.pluck('usa')),
russiaGroup = categoryDimension.group().reduceSum(dc.pluck('russia'));
Here is a jsFiddle to demsonstrate this: http://jsfiddle.net/djmartin_umich/nK6K7/
composite
.width(400)
.height(300)
.x(d3.scale.ordinal().domain([1,2,3]))
.xUnits(dc.units.ordinal)
.yAxisLabel("User Count")
.renderHorizontalGridLines(true)
.compose([
dc.barChart(composite)
.centerBar(true)
.gap(100)
.colors('red')
.dimension(categoryDimension)
.group(russiaGroup),
dc.barChart(composite)
.centerBar(true)
.gap(100)
.colors('blue')
.dimension(categoryDimension)
.group(usaGroup)])
.brushOn(false)
.render();
You'll need to play around with the styling... the blue and red combine into a purple color when the opacity is lowered.