I've got a multi-axis chart with several lines in the graph.Currently as I move the mouse over the chart, several balloons appear at each point showing the values of the various lines at that point. At the same time, the legend at the bottom of the graph also displays values for these points. Is there a way I can disable the balloon text from appearing when I hover over the chart. The values appearing in the legend area is sufficient.
Just insert "showBalloon": false for each graph. Reference
use baloon object in graph option to enable and disable amchart baloon.
"graphs": [
{
"valueAxis": "item1",
"balloon": {
"enabled": false
}
]
Related
I am playing around with AMCharts StockChart for a projcet I am working on.
I will like to change the orientation for the StockCharts to vertical:
i.e. the categoryAxis on the Left, and the Value Axis bottom - so the lines would show vertically instead of horizontal (as it is by default)
Does anybody know how to do this?
Basically, I want to take This Horizontal Chart and turn it into this vertical chart
Stock charts can only be rotated at the panel level. You can set rotate: true directly in each panel or in panelsSettings:
panelsSettings: {
rotate: true
}
You'll need to disable the global scrollbar and use a panel-level chartScrollbar as the global one doesn't get rotated.
panels: [{
chartScrollbar: {},
// ...
}],
chartScrollbarSettings: {
enabled: false
}
Here's a demo
I am working with amchart to build a strip chart using AMstock (rotated).
Is there a way to display only category axes values on a panel? see sample screenshot here.
I have 2 charts. Left should show only category axes values. the right shows the strip chart.
Right now I am stuck at creating the chart options to show only category axes values (double values).
Any help will be appreciated.
I was able to solve this by removing the stock graphs entry for my panels.
...
'panels': [
{
'showCategoryAxis': true,
'title': 'Value',
'percentHeight': 100,
'lineThickness': 2,
'autoMargins': true,
'autoMarginOffset': 0,
// as you can see, the stockGraphs is commented out.
// 'stockGraphs': [{
// }],
}
],
...
hopefully this helps somebody.
How can I set the vertical lines related to the Category Axis which are NOT the grid ?
Watch the pictures to see what I m looking for.
It s not the grid, I don't think it's neither a trend line nor a guide. It s related to the data.
Any help will be deeply appreciated.
(I tryed to use the Editor to find it out... no magical result lol)
Amchart picture
amchart my result
This is how I fixed my problem :
somewhere after "type": "serial",
"gridAboveGraphs": true, // to get the vertical lines above the graph
And I added in "categoryAxis": { ... }
"gridAlpha": 1, // to make the vertical lines appear
"gridColor": "#ffffff", // to set the color of the lines
"gridPosition": "middle", // instead of 'start' to see the lines like I wanted
I wanna thank people who tried to help me.
Best regards.
Please see example screenshot - I cannot reproduce except on this site, it seems to be some conflict with the css but any ideas what?
Normally, plotly moves the legend at the top if there is not enough horizontal space. However, this example shows that the legend overlaps the graph. Even if I make the legend orientation horizontal, it still overlaps the graph.
Do you have any ideas why it could happen?
Adjusting the legend position in normalized coordinates should help. See also here.
I.e.:
layout = go.Layout(
legend={"x" : 1.2, "y" : 1}
)
Placing the legend outside of the plot works for me:
var layout = {
showlegend: true,
legend: {
x: 1,
}
};
Fixed by a css wizard https://tiki.org/item6567 (Luci):
.js-plotly-plot .plotly .main-svg {overflow: visible}
.js-plotly-plot .plotly .main-svg .legend {transform: translate(640px, 100px)}
I've spent a lot of time finding the solution, but i can't see any property in AmChatrts documentation that can align balloons not vertically. Actually, I just want to see all balloons, but not in one column. Can anybody help me?
There is currently no way to make the balloons stack in any different way than in once column. However, there are a few alternatives you can consider.
1) Displaying just one balloon.
To do that, set oneBalloonOnly to true:
var chart = AmCharts.makeChart("chartdiv",{
...
"chartCursor": {
"oneBalloonOnly": true
}
});
This will make the cursor display just one balloon of the closest graph.
2) Disable balloons and use a legend instead.
To disable balloons, simply set [valueBalloonsEnabled][3] in chart cursor's settings to false.
var chart = AmCharts.makeChart("chartdiv",{
...
"chartCursor": {
"valueBalloonsEnabled": false
},
"legend": {}
});
The legend will show relative value next to each graph title when you hover over the chart.
3) Consolidate values from multiple graphs into a single balloon.
To do that, use graph's balloonText property. It lets you reference to any field in data, so you can make it display values from any graph.
Here's a good example of the above.
Here's a good demo on how to do that.