I want set plotband height inside graph area only for areaspline.
You can't do this with a plot band, but you can do it with a second series.
So, given an example data set of:
data:[1,2,6,9,8,7,5,6,3,6,5,8,7,4,5,8,9,6,3,2,1,2,3,2,1,2,3,6,5,9,8,9,7,7,4,5,8]
You need to know the x and y values of the portion that you want to highlight.
Then you can add a second series that highlights that portion, and format it however you want:
{
lineWidth: 0,
color: 'rgba(255,255,255,0.5)',
data: [[14,5],[15,8],[16,9],[17,6]]
}
You can hide it from the legend by adding:
showInLegend: false
Example:
http://jsfiddle.net/jlbriggs/t6r7ywaw/
Output:
Related
Hi, I need help in changing a bunch of styling properties for the ChartXY and Axis. I tried the methods from the documentation but its either the function is not found or it is not clear which method in the API doc.
changing the default x and y ticks font properties (family, size, style) - In the API doc I only see the title and for custom ticks.
changing the chart bg color - ChartXY.setChartBackgroundFillStyle returns a function not found error
changing the chart border props - ChartXY.setChartBackgroundStroke returns a function not found error
Please help.
changing the default x and y ticks font properties (family, size, style)
All modification of automatically placed Axis ticks is done via TickStrategy. Since, different tick strategies can have different tick structures, this modification must be at the same time when the tick strategy is specified. It looks like this:
chart.getDefaultAxisX()
// Specify tick strategy and configure it via callback function.
.setTickStrategy(AxisTickStrategies.Numeric, (ticks) => ticks
.setMinorTickStyle((style) => style
.setLabelFont((font) => font.setStyle('italic'))
)
)
In this case, ticks is of type NumericTickStrategy.
Note for TypeScript users, tick style currently has to be casted to VisibleTicks, like this: ticks.setMinorTickStyle((style: VisibleTicks) => style...)
changing the chart bg color
chart.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
changing the chart border props
chart.setSeriesBackgroundStrokeStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) }) }))
Is it possible to achieve this -
Different colour in the same bar
Color length proportional to % of data available in that year
In total there are 4 years and I want to partition each bar into a maximum of 4 parts (can be 1, 2, 3 or 4 parts depending on years selected).
What you are searching for is something called "Stacked Bar Chart". This kind of chart can be used with the library you mentioned.
As in the documentation:
Stacked bar charts can be used to show how one data series is made up of a number of smaller pieces.
Here an example taken from the documentation:
var stackedBar = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
}
});
Please, for more details refer to this section of the documentation:
https://www.chartjs.org/docs/next/charts/bar/#stacked-bar-chart
I am having a trouble to customize the kendo chart in order that all of my data in the chart is shown correctly. As you can see on the picture bellow, the value of my data is cutted on half.
As the data is assigned dinamicaly, it's not possible to set the constant size of a chart in order to fix the problem.
Is there any option to set (f.e. css property) to fix this issue?
Or is there any way to manipulate the "max" property of a valueAxis to be always 10% bigger than the maximum loaded value.
I've already tried playing with margins and padding, or changing the width of a chart, but problem is still there.
Here is the photo:
One option is to increase the right margin of the plotArea:
plotArea: {
margin: {
right: 30
}
},
Another option is to change the label position
seriesDefaults: {
type: "bar",
labels: {
visible: true,
background: "transparent",
position: "insideEnd"
}
},
Using rCharts wrapper for High Charts, how would I plot different charts onto the same graph? In other words, I would essentially want one chart, let's call it h1, to be its own chart with its own x-axis and y-axis and another chart h2 to have its own x-axis and y-axis, but I would like to be able to return some final chart, say h3, that stacks h1 and h2 into one object that I can return with my plotting function. Is this possible? I don't have an example because I don't have an understanding of how to really approach this problem right now. Thank you.
I don't know anything about the rCharts side of it.
But to do this in Highcharts, you can specify multiple y axes, specifying a top an height property, and multiple x axes, using the offset property.
Then you assign an xAxis and a yAxis for each data set.
xAxis: [{
offset : -120
},{
}],
yAxis: [{
title : { text: 'Y Axis 0' },
height : 100
},{
title : { text: 'Y Axis 1' },
offset : 0,
top : 200,
height : 100
}]
Example:
http://jsfiddle.net/jlbriggs/nq6fphn8/
I have a clustered chart with 2 column series. The problem is that sometimes one column's values are so large, the other column is dwarfed. So I added checkboxes to show/hide a given column, and set the visibility of the ColumnSeries as such:
visible="{checkbox.selected}" includeInLayout="{checkbox.selected}"
This shows/hides the given column correctly, the problem is that it does not reset the Y-Axis, so the other column never actually grows in height (when the column with the larger values is hidden). I've tried resetting the data provider, validating/invalidating the chart, and nothing seems to work.
Anyone have any ideas?
Thanks!
I would imagine from your description that you actually need to remove the series from the chart. So
public function onToggle(){
var newSeries:Array = [];
if(bigSeries.selected) {
newSeries.push(bigSeries);
}
if(smallSeries.selected) {
newSeries.push(smallSeries);
}
chart.series = newSeries;
}