Remove shadow on Highstock - javascript

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.

Related

how to adjust distance between to bars in bar chart highchart

highchart issue screenshot
I want to adjust the highhcart bars spacing, I want to remove gaps and overllaping issue on two bar charts
You can control the gap by using groupPadding property. To remove the space between two columns in one group, set pointPadding and borderWidth to 0.
plotOptions: {
series: {
borderWidth: 0,
groupPadding: 0.1,
pointPadding: 0
}
}
Live demo: http://jsfiddle.net/BlackLabel/uhkfj93w/
API Reference:
https://api.highcharts.com/highcharts/series.bar.pointPadding
https://api.highcharts.com/highcharts/series.bar.groupPadding

Highcharts line chart - do not display the line

This requirement may sound bit weird but unfortunately It is the requirement which I have to fulfill. In Highcharts Line chart, can we hide the line and just display the points? Something like the following link: 8bdovxn4
Using the above fiddler link, I have set the line width to 0. But on hover It displays the line. Is It possible to hide the line on hover too?
Set lineWidthPlus property on hover state to 0. As an alternative, you can use scatter series type: http://jsfiddle.net/BlackLabel/0ke4or2z/
plotOptions: {
series: {
lineWidth: 0,
states: {
hover: {
lineWidthPlus: 0
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/614fr8oj/
API: https://api.highcharts.com/highcharts/series.line.states.hover.lineWidthPlus

ECharts: how to show all axis labels?

Echarts seems to have a nice feature that automatically chooses which labels to display depending on the space provided. However, this algorithm seems to be bit too aggressive at times and does not take into account text rotate. I've gone through the chart options and there doesn't appear to be a way to disable this feature. I'm hoping it's just something I've overlooked. Help appreciated.
axisLabel (under yAxis or xAxis) has an option interval. Set this to 0 and labels will be displayed.
You can try this to force the label of the x-axis,
xAxis: {
type: "category",
data: data[0],
axisLabel: {
interval: 0,
rotate: 30 //If the label names are too long you can manage this by rotating the label.
}
//If your label is in the `y-axis` simply change the code `xAxis` to `yAxis`.
If your axis label is not showing in a chart frame (mean ECharts label's length is too long), Try this,
grid: { containLabel: true },
2 ways to solve long label text
Using rotate option xAxis : { axisLabel: {
rotate: 45
} }
Using formatter and introducing '/n' to break the text
just for the record:
If your categories have a fixed width, you can also set it up like this, in order to show all labels:
axisLabel: {
width: 100, //fixed number of pixels
overflow: 'truncate', // or 'break' to continue in a new line
interval: 0,
},

Highcharts - area "appearance" but not start at 0

This might be a strange request but is it possible to have a single line chart "display" as area, as in have the shaded part below the line, however not rescale the y axis from 0?
So for example this chart: http://jsfiddle.net/29shP/1/
Is chart type line...
But if I change type: 'area'
Then it displays like this:
Is it possible for the series to stay as it is in the first image, but with the shaded colour below?
Thanks
I advice familiar with this https://github.com/highslide-software/highcharts.com/issues/1401 thread which describe this issue.
Here is the answer given in the thread:
The difference is that the threshold is set to 0 by default for areas. You'll find the same for columns. See http://api.highcharts.com/highcharts#plotOptions.area.threshold. You can disable that behaviour by setting the threshold to null.
yes you can do that
highcharts allow you to keep separate series options in the navigator there you can change
navigator: {
series: {
data: ADBE,
type: 'line'
}
},
here is a jsfiddle for your reference http://jsfiddle.net/GhA5d/
updated your fiddle at http://jsfiddle.net/29shP/2/
Hope this will be useful for you
Use "min"
yAxis: {
startOnTick: false,
endOnTick: false,
min: 0
},
Example: http://jsfiddle.net/29shP/4/
If you want multiple yAxis min, you can do this:
yAxis: [{
min: 0
},
{
min: 0
}],
Check this: Highcharts - Multiple Y Axis Stacked Charts (include jsFiddle in comments)

Highstock/Highchart cannot set Individual Point color

I am working on Highstock, I am trying to set a color to a specific point in "data" in Highstock, like in the example, but I couldn't get it to work, no matter how I set the color, it doesn't show on the graph.
I have tried the option with Highchart API, it works, but it doesn't work with Highstock.
jsfiddle link(what I have tried)
Is it because I am using x, y to specify the point? Please help.
If you look to your demo you'll see that using color it sets the tooltip color and not the marker.
To fix it use marker fillColor instead, like the following.
data: [
{x: 1343862840000, y: 4, marker:{ fillColor: 'red'} },
{x:1343863200000, y:5, marker:{ fillColor: 'green'}}
]
demo
Update:
It works on highstock see this demo.
You have to init it using the right object.
Use Chart instead of StockChart.
reference
point marker
Highstock has point markers disabled by default. You will need to enable them explicitly as follows:
plotOptions: {
series: {
marker: {
enabled: true
}
}
},
See more at http://api.highcharts.com/highstock/plotOptions.series.marker

Categories