We Keep Coding

High chart legend colors in square form

I need legend colors in square form but its square boxes also appearing on graph which I don't need.
It is also appearing on the graph which I don't need.

You can add the below plugin to use legend symbol drawing method from pie series and set legend.symbolRadius to 0.
(function(H) {
H.seriesTypes.line.prototype.drawLegendSymbol = H.seriesTypes.pie.prototype.drawLegendSymbol;
}(Highcharts));
Highcharts.chart('container', {
legend: {
symbolRadius: 0
},
series: [...]
});
Live demo: http://jsfiddle.net/BlackLabel/0Lf2qupm/
API Reference: https://api.highcharts.com/highcharts/legend.symbolRadius
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

Make lines thicker in bar chart

I have this chart:
I have 2 issues:
How can I make the bars thicker and add space between them because they are so small that they blend in each other.
As you can see in the photo, the highest value is 3 but how can I stop the chart after that so there is no blank space like in the photo between 3 and 4.
Thank you very much!

Reduce pointPadding and groupPadding properties or increase chart's height.
Set yAxis.maxPadding to 0:
yAxis: {
...,
maxPadding: 0
}
Live demo: http://jsfiddle.net/BlackLabel/s3c7yz2w/
API Reference:
https://api.highcharts.com/highstock/series.column.pointPadding
https://api.highcharts.com/highstock/series.column.groupPadding
https://api.highcharts.com/highstock/chart.height
https://api.highcharts.com/highstock/yAxis.maxPadding

solution : Manage space between group columns in highchart

I was working with highchart on group columns , well here I had to reduce the size of column but by doing this highchart weirdly managing space between columns when data is less, so I was searching for solution where I found bellow link which is realy helpfull
https://github.com/highcharts/highcharts-react/issues/77

You can manage the space by using pointPadding and groupPadding properties:
plotOptions: {
series: {
pointPadding: 0.1,
groupPadding: 0.3
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4875/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.column.pointPadding
https://api.highcharts.com/highcharts/plotOptions.column.groupPadding

Remove shadow on Highstock

I'm using Highstock library, and I want to delete from my chart, does anyone know?
Thanks.

That line is the lineWidth of the axis (API). Set it to 0 (which is also the default):
yAxis: [{
// ...
lineWidth: 0
}]
See this JSFiddle example of two y-axis, one with lineWidth set to 0 and one set to 2.

In your chart object set shadow to false:
chart: {
type: 'line',
backgroundColor: '#FFFFFF',
shadow: false
},
Example fiddle: http://jsfiddle.net/omarjmh/L3fw3tr4/
play with the code and press run at the top.

Highcharts - Resizing Columns to Fix Data Label

I'm trying to get the columns of my Highcharts chart to resize in order to always leave room for the data labels.
Right now, I can only do one of the following:
Have the data labels appear inside the columns themselves: jsfiddle.net/gjslick/LrAuf/
Have the data labels cropped when they don't fit: jsfiddle.net/gjslick/L7LKA/1/
Have the data labels display, but overlap other lines in the chart: jsfiddle.net/gjslick/WbQb4/1/
Is there any way to get the columns to be resized in order to guarantee that the label fits above/below the column? Thanks!

My preference would be for #1. But, you could also try using xAxis.offset to add some padding between the xAxis labels and the actual chart area (see this one). But, as you can see I increased the negative value to be much larger than your original one. This shows how the yAxis is auto-scalling and it actually increases the padding a bit too much. To fix this you may need to go and get prefetch the maximum/minimum y-values and manually set the yAxis min/max.
xAxis: [{
offset: 14,
title: {
text: ''
},
type: 'category'
}],
yAxis: [{
min: -10,
max: 10,
title: {
text: ''
},
labels: {
enabled: false
},
gridLineWidth: 0
}],