Hight Chart Polar Scatter Plot values on chart and x-axis - javascript

I want to create chart as per below image. I have also created jsfiddle using highchart in the fiddle.
but, still not able to do what I want. How do I do? Any help would be
appreciated.
http://jsfiddle.net/shahrishabhptechnical/2uxq7raf/
jsfiddle - Highcharts Example


You can use basic yAxis to show ticks with labels, but you will need the right properties and wrap on getMarkPath method:
yAxis: {
lineWidth: 1,
tickPosition: 'inside',
showLastLabel: true,
tickWidth: 1,
tickColor: '#000000',
angle: 90,
tickInterval: 1,
labels: {
y: -10
},
lineColor: '#000000'
}
Live demo: http://jsfiddle.net/BlackLabel/e940tvzx/
API: https://api.highcharts.com/highcharts/yAxis
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

Related

In highcharts, is it possible to make a bar in a column chart with its top bordering the edge of the chart area "on top" of the chart border?

This is the JSFiddle for demonstration.
In the two bars shown in the above JSFiddle, the respective top and the bottom side of the two bars are not black, but grey, since that is the color of the chart border/border of plot area. Would it be possible to make the two bars to be "on top" of the chart border (so that all their sides are black)? I have tried with zIndex in "series". But that does not work.
These are the most relevant javascript code:
Highcharts.chart('container', {
chart: {
type: 'column',
borderWidth: 1,
plotBorderWidth: 1,
marginBottom: 100
},
plotOptions: {
series: {
borderColor: 'black',
animation: false
},
},
xAxis: {
categories: ['1', '2']
},
yAxis: {
tickInterval: 10,
min: -50,
max: 50
},
series: [{
data: [50, -50],
zIndex: 300
}]
});

To achieve this effect, you can set series.column.clip: false.
Disabling this option allows series rendering over plotArea borders.
series: [{
clip: false,
data: [50, -50]
}]
Live demo:
https://jsfiddle.net/BlackLabel/2kyc4dbu/
API reference:
https://api.highcharts.com/highcharts/series.column.clip

Edit or remove space between Datasets in Stacked Highcharts chart

I would like to edit or remove the gaps in a Higharts chart like this:
Is there any way to style or configure my chart to achieve this?
This is the Demo:
https://www.highcharts.com/samples/codepen/highcharts/demo/bar-stacked
Thanks

You can control the space between bars using pointPadding, groupPadding and borderWidth properties:
plotOptions: {
series: {
stacking: 'normal',
pointPadding: 0,
groupPadding: 0,
borderWidth: 0
}
}
Demo:
https://jsfiddle.net/BlackLabel/at1r2xLj/1/
API reference:
https://api.highcharts.com/highcharts/series.bar.pointPadding
https://api.highcharts.com/highcharts/series.bar.groupPadding
https://api.highcharts.com/highcharts/series.bar.borderWidth

Highcharts plotLines with multiple xAxis and yAxis

I have a chart with multiple xAxis and yAxis. I want to have multiple plotLines on the xAxis, but each plotLine doesn't stay on it's course. Here's the fiddle. Click on All to see what I mean.
The plotLine on the first axis goes to the second axis as well. How could I stop it?

There is a solution suggested in the HighCharts issue tracker which involves defining the related xAxis on each yAxis. So a plotline defined on a particular xAxis will use the top and height of the related yAxis to draw the plotline only in the correct area.
yAxis: [{
title: {
text: 'OHLC'
},
height: 200,
lineWidth: 2,
xAxis: 0,
}, {
title: {
text: 'Volume'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2,
xAxis: 1,
}, {
title: {
text: 'Other data panel'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2,
opposite: true,
xAxis: 1,
}]
Updated Fiddle with each plotline only on its corresponding pane.
Note that the ability to define related axes appears to be undocumented in the API.

Add vertical(projection) line from point to categories, highcharts

I have a areaspline plot(stacked), and what I need now is add a projection line from the toppest point(not chart) to the corresponding category. like:
I lookup on the api reference about xAxis but did not find what I want.

You can use plotLines
xAxis:{
plotLines: [{
color: '#ffffff',
width: 2,
value: 5.5
}]
}
or gridLines
xAxis: {
gridLineColor: '#fff'
},

Navigator series in Highstock (highcharts-ng)

I have a Highstock chart. I use highcharts-ng for that. After I remove old serie and add new one, serie in navigator doesn't update. It's not so necessary to have this miniature of chart in navigator, I can set it's opacity and I don't see it, but I need to have the proper range after changing serie. And the range doesn't update too. Here is screencast:
http://videobam.com/jXwOC
Here is my navigator configuration:
navigator:
adaptToUpdatedData: true
series:
data: []
xAxis:
labels:
style:
fontSize: '14px'
fontWeight: 'bold'
maskFill: 'rgba(0, 165, 211, 0.05)'
enabled: true
series:
# lineColor: 'rgba(0,0,0,0)'
# fillColor: 'rgba(0,0,0,0)'
lineColor: '#00a5d3'
fillColor:
linearGradient : {
x1 : 0,
y1 : 0,
x2 : 0,
y2 : 1
},
stops : [[0, '#95d7e7'], [1, '#ffffff']]

Navigator is always bind to the first series or the series according to ID. So instead of removing series, use series.update() - that will update series with all required options, and connection will be working.

Categories