Hi i have a stacked bar chart with time series like this :
But i need that yellow series to be next to the others like this :
I am not able to keep three series stacked while having another one not stacked and with an offset to the left. I tried different things but none of them works.
adding this when declaring the data did the trick:
data: theData,
stack:false,
bars: {show: true, align: "right" }
Related
I made 2 pie charts using Highcharts from different data.
So they have different number of data as well as legends.
But I want to align them properly so chart by chart, legend by legend.
How can I do this?
I tried to set max-height of pie chart legends but that not works.
Any help would be appreciated.
You will need to use the chart.spacingBottom and chart.spacingTop (API Documentation) to create the same space on both charts like this :
chart: {
spacingTop:15,
spacingBottom:18
},
Fiddle
With vertical legend layout it will be better to use margin property:
chart: {
type: 'pie',
marginBottom: 80
},
Live demo: https://jsfiddle.net/BlackLabel/a62ztm5o/
API: https://api.highcharts.com/highcharts/chart.marginBottom
I have a requirement where I need to change series array completely in the chart,
I have 2 legends in my chart, I wish to load a chart with one disabled legend, that's working fine,
now when the user clicks on the disabled legend corresponding data should be added automatically to the chart,
I tried same with chart.series.addSeries(), but that is giving different issues, as the new data which is to be added is not only after the first legend but it's in between those legends
chart
For eg: chart loads, with just grey legends, orange is hidden or is not added at all, on clicking on the orange colour legend I want to add this data to that chart, Please check the chart in the image
is there any way to replace series array completely.
Something like
chart.update({
series:newSeriesArray
});
I am using the bar chart from highchart.
Thanks in advance.
I have 2 legends in my chart
Do you have a separate legend for each series or do you mean legend item for each series?
Highcharts provide a possibility to set data to particular series - series.setData() method. So when a chart is initialized you can create empty series (series with name, color etc but without data array) with property visible: false, then your series will be hidden and legend item disabled:
{
name: 'Year 2016',
data: [],
visible: false
}
When user clicks legend item plotOptions.series.events.legendItemClick function will be invoked (if defined). In this function, you can set data to this particular series using series.setData() as mentioned above:
plotOptions: {
bar: {
events: {
legendItemClick: function() {
if (!this.data.length) {
this.setData([665, 234, 2344, 123, 23])
}
}
}
}
}
Demo:
https://jsfiddle.net/wchmiel/uLfcknsb/
I am trying to show the zero value in the trellis horizontal bar charts. I have tried using the minPointLength to show the zero value. but its not working, and I have tested for another stocked vertical charts its working, but the issue with horizontal charts only. working example for vertical charts vertical charts
code i have tried:
plotOptions: {
column: {
minPointLength: 3
}
},
please find the horizontal charts jsfiddle.
thanks
Notice that your plotOptions refer to the column type of the series, but the ones that you use are bar series. If you change the code from your question to:
plotOptions: {
bar: {
minPointLength: 8
}
},
everything seems to work fine.
Live demo: http://jsfiddle.net/kkulig/c4tbpqLe/
Following this demo here (http://www.highcharts.com/docs/chart-and-series-types/combining-chart-types) I am trying to have a Pie chart and a bar chart on the same page.
The catch is I would like the Pie chart to be large on the left and then the bar chart on the right. I see the code to move the pie chart around, but I cannot figure out how to do the same with the bar chart, as it seems to want to span the entire container width. I understand that I could have two independent charts and place them in their own floating DIVs, but since the combining of charts is possible, I thought this would be a viable option.
You can set chart.marginLeft to half of the chart width. And set pie.center x coordinate to a negative value.
chart: {
marginLeft: 400
},
series: [{
center: ['-75%', '50%'],
example: http://jsfiddle.net/L55w9n53/
Using highcharts, legends are displayed in a horizontal manner. I am trying to display in vertical order (one series below the other) but I could not find any solutions for that.
In the image below, the order of legends are horizontal. Can someone help me figure out how to display the legend in a vertical order?
Use this snippet, it will place the label vertically in bottom of chart:
legend: {
verticalAlign: 'bottom',
layout: 'vertical
},
You can check it with this fiddler.