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
Related
I have a highchart made with Angular.JS. Each column has its own stack level and is essentially managing its own group of data
My series is an array of objects that looks like this:
[{
name: seriesGroup.name,
data: [number],
xAxis: xAxisLevel,
stack: xAxisLevel
}]
The problem I'm having is that highcharts seems to automatically add some offset styling that moves each column out of position. Ideally I want all columns centered correctly like the one for Currency. See image above where you can see the x-positioning that's getting added to the rect tag.
Is there any parameter I can set to highcharts to disable this effect? I have not been able to find anything of the sort in the API docs.
Please take a look at the fiddle for a simplified version:
https://jsfiddle.net/nz0v8w5u/
You can make it setting appropriate plotOptions.series.groupPadding property. In your case 0.5 seems working as expected. Check the code and demo posted below.
Why do you add five xAxis instead of using just one? With one axis highcharts will automatically position columns properly and the code is much easier. Check this example: https://www.highcharts.com/demo/column-stacked
Code:
plotOptions: {
column: {
minPointLength: 1,
groupPadding: 0.5,
stacking: "normal",
dataLabels: {
enabled: false
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/7pL8mj1s/
API reference:
https://api.highcharts.com/highcharts/series.column.groupPadding
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
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.
Using the states.hover property on a bar chart, there does not seem to be a direct way to change the color of the hovered bar.
Reference:
http://api.highcharts.com/highcharts#plotOptions.bar.states.hover
Is there a work around for this?
Seems very odd to be able to update the "brightness", but not just be able to directly specify a hover state fill color...
{{EDIT
Ok, so, the hover.color works if no color is explicitly set on the bar, but does not if the color is set at the point level (ie '{y:8, color:'#00ff00'}').
Example:
http://jsfiddle.net/3qtZr/44/
I have a chart where I need to set some colors explicitly on the point level, but still want to override the color on hover.
Any ideas?
there is color property.
states: {
hover: {
brightness: 0.2,
color: '#ffccee'
}
}
Simply Provide it in the configure obj
series: [
{
//data
states: {
hover: {
brightness: 0.5,
color: '#4318FF'
}
},
}
],
I am experimenting with the FLOT plot tool and having some problem with the legend. Specifically, the CSS for the legend must be being overwritten somewhere in my code because the legend is looking like this:
When I try to pass legend options to the plot, they do not appear. What do I need to do fix this CSS problem? Thanks.
Here is some of the code I am working with:
var options = {
series: {
lines: { show: true },
points: { show: true },
legend: {
margin: 5
}
}
};
$.plot("#flotcontainer", [ json ], options);
The margin option from flot specifies the distance to the plot edge which seems about right at 5 pixels. Try to set the position option too (see the documentation for more information).