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.
Related
I am trying to do a barchart with Recharts but ticks on both axis are getting out of svg:
Do you know to solve this ?
In your example, your tick labels have an angle that puts them out of the svg zone. To turn back your tick labels like on a line, you need to either update the angle prop to 0, like the following:
<XAxis dataKey="name" angle={0} />
Removing the angle prop from the XAxis would work as well, since its default value is 0.
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)}
How can I show the data in balloon text while cursor is in chart in when using xy type chart?
I want to show my data like this:
https://www.amcharts.com/demos/chart-with-gaps-in-data/
I am using type: xy amchart, with x axis values as date, and y axis data as integer .
The amCharts demo uses a chartCursor (https://docs.amcharts.com/3/javascriptcharts/ChartCursor) for this behavior. Unfortunately you cannot get the same behavior for an XY chart, meaning for an XY chart, balloons will only show when hovering exactly over a data point/bullet.
But if your X-axis is a date based axis and Y is an integer (value) axis, you could use a Serial Chart to get that same chartCursor behavior.
I am trying to get the X axis and Y axis value in crosshair tooltip of kendo chart. Please see: http://dojo.telerik.com/iDanE
How can this be done? How to specify the template for tooltip to contain both X axis and Y axis value? Want to have both category and value axis value in the same crosshair tooltip. Can this be done?
I just found a question with same requirement: http://www.telerik.com/forums/show-multiple-series-value-in-a-categoryaxis-crosshair-tooltip-
But how can use this in my example : http://dojo.telerik.com/iDanE ?
Thanks in advance.
According to their documentation, the crosshair tooltip template only has access to the axis value: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.crosshair.tooltip.template
So you could either add the second crosshair on the valueAxis:
DEMO
or just show a regular tooltip with both category and value:
tooltip: {
visible: true,
template: "#: category # - #: value #"
},
DEMO
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", ...]