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
Related
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 have a CanvasJS stacked area chart which is ignoring my attempts to change the x axis labels font size and color. I use this code:
axisX: {
gridThickness: 0,
interval: 5,
lineThickness: 1,
labelFontColor: "#000000",
labelFontSize:12
but my axis labels remain unchanged from the default size and color:
is there anything special required for stacked area charts?
Thanks in advance.
Issue was that the axis format property was not inside the x axis jason node, so user error! Thanks for the reply Indranil.
I do have a stock panel with 2 stockGraph: an OHLC graph and a turnover graph for which they have their own valueaxis
In 3.14.5 the cursor text only shown on the 1st valueaxis [i.e. OHLC graph's valueaxis] but not on the 2nd valueaxis
I just try 3.18.6 and the cursor text show on both valueaxis too
How can i disable the text on the 2nd valueaxis ?
You can disable value balloons for individual value axes by setting balloon.enabled variable in that axis' config. I.e.:
Use this property to disable balloons for certain value axes. I.e.:
"valueAxes": [{
// ...
// value balloons are shown
}, {
// ...
"balloon": {
"enabled": false
}
// value balloons are not shown
}]
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
}
]
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", ...]