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", ...]
Related
I need to show the grid lines on area chart within the background. I am working on amcharts area chart. I need the chart like attachment image.
For v4, please check out our guide on Axis Ranges for Series.
Our Chart With Gaps In Data demo does exactly what's shown in your screenshot:
The parts that allow the grid lines to come through is that the fills are transparent via fillOpacity:
// There's no series.fill because it has its own color already
series.fillOpacity = 0.2;
// [...]
range.contents.stroke = chart.colors.getIndex(2);
range.contents.fill = range.contents.stroke;
range.contents.fillOpacity = 0.2;
Let us know if this helps.
You have to use gridAboveGraphs and set it to true in your chart config.
AmCharts.makeChart("chartdivcontainer", {
"gridAboveGraphs": true
});
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
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'm currently working with highcharts to generate a chart that has several pie charts inside. So basically a data set that has 3 or 4 series, each with their own name and data. The charts render perfectly, and now I would like to place the series name above each pie in the chart. The only way I can see to do this is with the label property. The issue that I'm having is that the series are positioned within the chart with percentages. A series looks like:
series: [
{
name: 'series name',
data: [25, 25, 50],
center: ['33%']
}
]
So now I want to apply a label to that series, but I'm having issues deriving what the "style" property should be set to. using the series center (which I was hoping would position the label directly over the series pie) doesn't seem to work.
Any ideas?