I need to make somewhat of a grid which is dotted, like on the image here:
How would one go on and do about something like this? I know how to do gridlines full, but I want to have dotted gridlines.
You can use gridLineDashStyle to make dotted gridlines:
xAxis: {
gridLineDashStyle: 'dash',
gridLineWidth: 1
},
More style examples can be found here can be found here: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/
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'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
},
...
Current:
Expected One:
is there any way to fill that gap with a specific color in highcharts, i'm using chart type xrange here
thanks in advance code link in the comment
The simplest solution is to use yAxis plotBands:
plotBands: [{
from: -0.045,
to: 0.04,
color: 'red'
}]
Live demo: http://jsfiddle.net/BlackLabel/z10pjmcr/
I am trying to increase the space between charts in this link however i have used minPadding/maxPadding in xAxis and pointWidth: 90/pointPadding: 0 but nothing works. It seems to me that there is forced spacing at the top and bottom of the chart area which is causing this.
http://jsfiddle.net/j7NMC/2/
/*What i have tried */
series:{
pointWidth: 90,
pointPadding: 0
}
xAxis: {minPadding:0, maxPadding:0,}
Any ideas?
Thank you :)
I would suggest changing your data setup. Instead of 3 different series, use 1 series and 3 categories:
series: [{
data: [973,133,107]
}]
example: http://jsfiddle.net/j7NMC/4/
What this does for you:
1) eliminates that wasted space on the chart
2) eliminates need for legend by putting the labels right on the axis next to the bar (drastically improves usability of chart, makes comprehension much easier for user)
3) eliminates need for multiple colors for the bars (drastically improves usability of chart, makes comprehension much easier for user)
EDIT:{
you can try setting the groupPadding to 0 to remove some of the space, as the the 3 series you have displayed are grouped, and extra space is being added because of that.
The options need to be in the 'bar' section of plotOptions, and you don't need a series entry in plotOptions i.e. like this:
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
pointWidth: 10,
pointPadding: 0
}
},
http://jsfiddle.net/A8dpf/
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
}]