Rendering Artifacts in Stacked Area Chart with Gaps - javascript

I want to create an area chart of multiple series with percentual stacking using Hichstock. The time series may contain gaps which I want to visualize using the gapSize option.
When I render the chart with stacking: 'percent', the gaps are not fully empty. However, there is no issue when rendered with stacking: 'normal'.
Is there any option or incompatibility that I am not aware of, or is this likely a bug in Highstock?
Here is a JSFiddle that illustrates the problem: http://jsfiddle.net/8d5qzwrg/

Could be a bug in highcharts, a workaround is to use step, like this:
plotOptions: {
series: {
stacking: 'percent',
gapSize: 1,
step: 'center'
}
},
Working JSFiddle example: http://jsfiddle.net/ewolden/0rdjL1gq/2/

Related

solution : Manage space between group columns in highchart

I was working with highchart on group columns , well here I had to reduce the size of column but by doing this highchart weirdly managing space between columns when data is less, so I was searching for solution where I found bellow link which is realy helpfull
https://github.com/highcharts/highcharts-react/issues/77
You can manage the space by using pointPadding and groupPadding properties:
plotOptions: {
series: {
pointPadding: 0.1,
groupPadding: 0.3
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4875/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.column.pointPadding
https://api.highcharts.com/highcharts/plotOptions.column.groupPadding

Angular. Highcharts. Column Chart. Positioning of Columns on X-Axis

I have a highchart made with Angular.JS. Each column has its own stack level and is essentially managing its own group of data
My series is an array of objects that looks like this:
[{
name: seriesGroup.name,
data: [number],
xAxis: xAxisLevel,
stack: xAxisLevel
}]
The problem I'm having is that highcharts seems to automatically add some offset styling that moves each column out of position. Ideally I want all columns centered correctly like the one for Currency. See image above where you can see the x-positioning that's getting added to the rect tag.
Is there any parameter I can set to highcharts to disable this effect? I have not been able to find anything of the sort in the API docs.
Please take a look at the fiddle for a simplified version:
https://jsfiddle.net/nz0v8w5u/
You can make it setting appropriate plotOptions.series.groupPadding property. In your case 0.5 seems working as expected. Check the code and demo posted below.
Why do you add five xAxis instead of using just one? With one axis highcharts will automatically position columns properly and the code is much easier. Check this example: https://www.highcharts.com/demo/column-stacked
Code:
plotOptions: {
column: {
minPointLength: 1,
groupPadding: 0.5,
stacking: "normal",
dataLabels: {
enabled: false
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/7pL8mj1s/
API reference:
https://api.highcharts.com/highcharts/series.column.groupPadding

zooming/blowup and panning option in chart.js on category scales

i am using chart.js for making the charts. i have successfully done the graph things. Just i want a help in this regard that sometimes there could be just 30-40 points to plot. but usually there are about 1000 points.
So what is the good option which i can use for better analysis for this reporting tool. Like is there any option of blow up specific point or i can use a scroll to scroll my chart and expand it horizontally, a very large.
this is my chart image.
u can see there are many points and all are congested. i want to know what is the suitable solution.
This is my chart configuration in which i have set it to the responsive.
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: label,
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
var multistringText = ['Assay Value: '+tooltipItems.yLabel];
multistringText.push('Assigned Value: '+assigned_value[tooltipItems.index]);
multistringText.push('Sample ID: '+sample_id[tooltipItems.index]);
return multistringText;
}
}
},
Update: After searching and creating an issue on the official chartjs git repository . This is not possible for the category/simple x-axis lines. This mean you cannot add pan through the chart in this way using the category/simple scales on x-axis. however zooms still works fine.
Editing this question for the future readers.
P.s: Leave a comment in case of negative voting.
Check out chartjs-plugin-zoom. It is a plugin that adds the capability to zoom in/out and pan left/right/up/down to view the rest of your data that is not currently displayed on the zoomed chart.
Here is a live codepen example.
I'm not sure it will do exactly what you need, but its a great place to start (you can use this as a base and extend it to your needs). This plugin is also developed/supported by the same team as chart.js.

How to display legend in Highcharts Waterfall Chart and make the sum column of waterfall appear in multiple colors?

I tried to find a lot about this but didn't get the answer. For waterfall charts in Highcharts
legend: {
enabled: true
}
didn't seem to work. Can you suggest how can we display legend on a waterfall chart? Also, can we have the value of 'y' for every column displayed on top of the column, instead of being displayed on the column? For this change, with most of the other charts,
plotOptions: {
column: {
dataLabels: {
enabled: true
}
}
}
But this didn't work with waterfall charts.
And finally, is there a way we can make the sum bar look like an aggregate of the other bars in terms of color as well? Like, in the example shown -
My code is here - http://jsfiddle.net/yr779/236/
I am not sure what you are asking regards to the legend. Your jsFiddle is showing a legend - you only have one series "Series 1" and it is in the legend. To display the value of each waterfall you need to use the correct plotOptions:
plotOptions: {
waterfall: {
dataLabels: {
enabled: true,
crop: false,
inside: false,
overflow: 'none'
}
}
},

ExtJS Area Charts - Instead of stacking the areas on top of each other, how do I super impose all areas together with a different opacity?

I'm creating an area chart using ExtJS 4.1 and everything is rendering fine.
I have two areas and currently one area appears on top of another.
Instead of that behavior, how do I superimpose all the areas? I can change the opacity so that all areas are visible.
The examples given in the API documentation and several online sources show the stacked behavior only. Is that the default and only implementation of the area charts, or am I missing a simple configuration?
As seen in Area Charts Example, instead of all colored areas appearing one after another, I want them all in a single plane.
Kindly provide your inputs and suggestions.
Use Line chart with fill instead. Works for me.
This can be done using creating additional series instead of a single area series with an array of data points in y axis. Got the answer from Sencha forums.
series: [
{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['data1'],
style: {
opacity: 0.50
}
},
{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['data2'],
style: {
opacity: 0.70
}
}

Categories