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
}]
Related
I want to use combination charts to show horizontal bar chart along with line chart.
But the line i want should be same as the way it is shown in the column chart.
The line chart should not be inverted along the axis when the other series is converted to bar chart.
How can i achieve this ?
line_bar_chart
You can combine line and x-range series types:
series: [{
type: 'xrange',
...
}, {
type: 'line',
...
}]
Live demo: https://jsfiddle.net/BlackLabel/ex2a8o70/
Docs: https://www.highcharts.com/docs/chart-and-series-types/x-range-series
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
},
...
I am trying to update our old chart rendering engine to Highcharts.
How can i draw a chart like this with Highcharts?
example
I think maybe there is some way to combine the polar chart and pie chart but still not find out how to do it.
How about instead of combining polar and pie charts, use only polar chart? I prepared an example for you where I am using four series. The first one has disabled grouping and enableMouseTracking and it is treated as a background. I also modified pointPadding and groupPadding to be able to display series exactly as in the provided image. Take a look at the example below.
API Reference:
https://api.highcharts.com/highcharts/plotOptions.column.grouping
https://api.highcharts.com/highcharts/plotOptions.column.pointPadding
https://api.highcharts.com/highcharts/plotOptions.column.groupPadding
https://api.highcharts.com/highcharts/plotOptions.series.enableMouseTracking
Example:
http://jsfiddle.net/6hjefrcu/
the problem is you are adding the pie chart after the polar chart and the pie got on top of polar so you have 2 solutions
1.- add the pie chart before the polar chart
2.- play with zIndex; set zIndex of polar to 1 and zIndex of pie chart to 0 or in your code just set pie chart zIndex to -1
chartRender.addSeries({
name: 'score-template',
type: 'pie',
slice: false,
pointPlacement: 'between',
data: [
50, 80, 30
],
zIndex: -1
});
http://jsfiddle.net/z3Lr2z54/2/
On hiding both the series using legends, and then clicking one of the series shows xAxis starting from '-1', when ideally it should show only not null categories.
Using 'ignoreHiddenSeries: false' solves the purpose but again on hiding both the series using legend and then enabling other series tends to overlap both the series. Although on window resize event, series get aligned properly.
chart: {
type: 'column'
// ignoreHiddenSeries: false
},
Example for reference: http://jsfiddle.net/t88rc/
You can simply set for xAxis min:0, see: http://jsfiddle.net/t88rc/2/
Grouped column charts work best with equal number of data points per series.
Best solution I have found for this is to fill any missing data points with null values:
http://jsfiddle.net/jlbriggs/t88rc/1/
data: [49.9, 71.5,null,null,null,null,null,null]
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
}