We are using highcharts and are trying to customize a chart to look similar to this:
We were able to set colors as documented and also increase the thickness of the lines by using the lineWidth
attribute, but can't find a way to customize the data points so they are always circles and larger than the thicker lines. This is what it looks like at this point:
Also, we can't find a way to remove the default gray horizontal lines.
Help!
Highcharts Stock with UI resizable. Set the cursor to a point or set of points in different series. The point or points to set the cursor to. If setting multiple points under the cursor, the points have to be in different series that are being played simultaneously.
Resize the chart to a given width and height. In order to set the width only, the height argument may be skipped. To set the height only, pass undefined for the width. The new pixel width of the chart.
In styled mode, the stroke width can be set with the .highcharts-point rule. Defaults to undefined. When true, the columns will center in the category, ignoring null or missing points. When false, space will be reserved for null or missing points.
Example with 500ms on jsFiddle use chart.setSize (width, height, doAnimation = true); in your actual resize function to set the height and width dynamically Set reflow: false in the highcharts-options and of course set height and width explicitly on creation.
This gray line is called grid line, you can customize them following the reference.
To remove grid lines
yAxis: {
gridLineWidth: 0
}
Like this example.
Change marker width
plotOptions: {
series: {
marker: {
enabled: true,
symbol: 'circle',
radius: 7
}
}
}
demo
You can take a look here if you want to customize series markers.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With