I'm trying to create the powerpoint chart below in highcharts however as you can see the order of the series do not match. The legend and the categories match but I'm not sure how to make the series order match?
This is what my highcharts replica looks like (link to jsfiddle: (https://jsfiddle.net/6qxukd74/1/)
How can I make the highcharts look exactly like the powerpoint chart?
Add to the yAxis the reversedStacks property
...
yAxis: {
min: 0,
reversedStacks: false
},
...
Related
Is there any way to show the summation of area charts value in highcharts without using line chart? I would like to know any other alternatives.
You can use area series with stacking: 'normal' and set lineWidth and lineColor for the series at the top.
series: [{
lineWidth: 2,
lineColor: 'red',
...
}, ...]
Live demo: https://jsfiddle.net/BlackLabel/sft7bu8r/
API Reference: https://api.highcharts.com/highcharts/series.area.lineColor
I have a chart that has been designed that I'm working on and I have a few questions.
First, can I remove the grid lines etc. from the grid and just show a stacked bar graph with no axis/ticks etc.
Here's a link to the designed graph: UI of simple stacked bar chart
Thanks!
You can simply hide both axes to achieve the desired result:
yAxis: {
visible: false
},
xAxis: {
visible: false
},
Live demo: http://jsfiddle.net/BlackLabel/gspgunzj/
API reference: https://api.highcharts.com/highcharts/xAxis.visible
I have a Highstock chart with Navigator which is synced to 4 Highcharts on same page. The Highstock dates don't line up with Highcharts dates plus it's a different format.
Highstock and Highchart:: xaxis:
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
year: '%Y'
},
events: {}
},
Here's the site I'm working on, the file is to large for here. Click on any icon, then pick "Data and Charts". The top chart has a different date format and the bottom charts points don't line up with top chart. I'm sure its default behavior of both Highstock and Highcharts but I can't find a way around problem.
Any help would be greatly appreciated,
Michael
Your first chart, being a Highstock chart, has an ordinal x-axis (API). The other charts do not, as it is not part of Highcharts. You can solve this by setting it to false for the first chart:
$('#container1').highcharts('StockChart', {
xAxis: {
ordinal: false,
// ...
}
// ...
});
This also seems to fix your date formatting problem (I'm not sure why).
I'm trying to create a column chart (Highcharts) with a fixed width (range) for all the columns. I have around 300 columns, and I want to draw them actually as lines, and that's why I assign a very small range (0.001) for each of them.
The data format is basically like this: [numberId, min, max].
However, sometimes the height is shown correctly... but some other times it appears with strange height, not even the same for all the columns. I have tried many different things but I didn't manage to find the problem.
This is the jfiddle http://jsfiddle.net/deSSf/3/ (if you resize the area for the chart you will probably see the effect). The fiddle is actually using HighStock, but this chart should be from highcharts lib.
I have screenshos but can't post them.
The code is very simple:
chart: {
renderTo: 'container',
type: 'columnrange',
},
series: [{
data: [[1,0,0.001],......]]
}
There is huge difference between Highcharts and Highstock. In Highstock you have access to dataGrouping which collects data and groups when there is to many points to display on a chart.
Disable it to have working example: http://jsfiddle.net/deSSf/4/
dataGrouping: {
enabled: false
}
My goal is to have an arearange chart with bolded only top "border" with additional markers just on hover. I was trying to achieve with just one arearange graph, but I think it is not possible with arearange chart (linewidth works for both bottom and top border, and I am not able to show marker at all...). I have decided to go on with additional spline chart that would exactly overlap the top border of arearange chart. I have provided the working example in here:
in jsfiddle go to check: /ZvZDZ
As you can see on the top of the chart, spline graph does not exactly over lap the arearange chart, although data is this same.
Is there a way to fix that, so those both graphs would overlap
maybe there is a way to use just arearange chart without spline chart?
any help would be appreciated
I think you should use or:
line series and arearange
spline series and areasplinerange
Just mixes spline and arearange will provide example you can see. Unfortunately using only one arearange series is not possible - markers are disabled.
Example: http://jsfiddle.net/ZvZDZ/2/
Code:
series: [{
type: 'areasplinerange',
name: 'areasplinerange',
data: areaData,
marker: {
enabled: true
}
}, {
type: 'spline',
name: 'spline',
data: splineData
}]