In Kendo Area chart, if you enable/disable the "stack" option, you'll see that the series fill color is semi-transparent, by default. How do I make it a solid color?
PS I do not want to provide a custom series color, because my data is generated remotely, dynamically. I am happy to use the default colors, but since I'm stacking the series, I would like those colors to be solid so that they match the legend colors.
Thanks you in advance.
Just found that the correct setting to control the level of transparency is "opacity", set within seriesDefaults scope:
seriesDefaults: {
type: "area",
stack: true,
opacity: 1
},
Related
Hi I am drawing kendo UI chart with dark color but when i draw the chart with this seriesColors: ["#ffbf00"], it will show lighter color but i want full dark color i have attached image you can see area chart draw is very light color.I need same color show before the text of Phase 2 it is pure yellow or dark but in area chart show lighter i need dark color to represent the chart
I think you have this dark effect because your graph is transparent, to change the color of the legend, set the opacity (so as to have the color you set), then choose a color darker for the Series so as to have the same color both
to change the opacity:
seriesDefaults: {
type: "area",
stack: true,
opacity: 1
},
getting something like that
I was wondering if there is any way I can show labels Horizontally for PieSeries above Pie Graph, as by default it is shown below graph and vertically. I tried to find a way similar to Opposite property of AxisRendererX as given in OppositeProperty explanation, But I failed to show my labels in a Horizontal way above graph! An image of Pie Series that needs to be updated is attached for your reference.
amcharts uses the full area you provide for a chart. If you set the width of your chart to a small value, you have the result you showed. If you resize your chart like I did in the code pen below, the labels are shown horizontally.
To change the legend position you can use the legend.position attribute.
Available options are: "left", "right", "top", "bottom" (default), and "absolute".
https://www.amcharts.com/docs/v4/concepts/legend/#Positioning
In your case you can use the following code to move the legend to the top:
chart.legend = new am4charts.Legend();
chart.legend.position = 'top';
I created a code pen for your example.
I am trying to visualize a filter in my stock chart by graying out data points which are affected by the filter. I'm using axisGuides on my valueAxis in order to achieve this. However, I also have axisGuides on my categoryAxis and unfortunately, these now disappear beneath my horizontal axisGuides.
Is there any way to change the z-index of those guides? Or does anybody have a different solution?
I have adapted an official amCharts example to show what I mean:
http://jsfiddle.net/wq97ujne/
I'm setting plotAreaFillColors": '#ababab' on my stock panel and fillColor: "#ffffff" on my valueAxisGuide.
I would like for the vertical guides to be drawn in front of and not behind the white area.
You need to set above: true for the categoryAxisGuides.
Im following using this example : http://c3js.org/samples/chart_area_stacked.html
I am going to make an area chart for many dataSets and I want to make it so the area chart is not see through. Is there any property I can set or class I can add that will make it so?
You can change the opacity to make the areas opaque by overriding below css rule:-
.c3-area {
opacity: 1 !important;
}
Note:- Markers and tooltip vertical line is not visible fully because of side-effects.
Which looks as shown below:-
I think what I am asking is impossible, or at least so complex/hacky it would not be worth it-but in case I am wrong...please let me know.
I have a series of 4 kendo dataviz bar charts, each representing the same set of objects, each chart graphically displaying one property of the objects. What I would like is if a marker on one chart is clicked (so that object is "selected"), to highlight this object's marker on the other 3 charts. See pic for example:
I have looked through the Kendo Dataviz website/docs, inspected the SVG markup, and looked through the object returned on the series click (in Visual Studio), but haven't found anything that could be used to accomplish this. The one thing I have come up with is redrawing all the charts with the selected item "marked" within the data array so when it is redrawn, that item can be redrawn with a different color...but I'd like to avoid redrawing all the charts each time, if possible.
Does anyone have any suggestions? I would greatly appreciate ideas, the least complex the better. Thanks so much!
The closest way I know of achieving this without a redraw would be to use the axis selection property as a selection slider with a restricted width to one column range and prevent resizing. This would simulate a selection highlight without redrawing.
You can also use plotBands property on the CategoryAxis. This is how I am doing it:
$("#chart").data("kendoChart").setOptions({ categoryAxis: { plotBands: [{ from: index, to: index + 1, color: "#ffd0c0", opacity: 0.4 }] } });