Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Resize data points with highcharts

We are using highcharts and are trying to customize a chart to look similar to this: enter image description here

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: enter image description here

Also, we can't find a way to remove the default gray horizontal lines.

Help!

like image 739
Lightbeard Avatar asked Jun 28 '12 21:06

Lightbeard


People also ask

How do I use Highcharts stock with UI resizable?

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.

How to resize the chart to a given width and height?

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.

How do I set the stroke width of a Highcharts column?

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.

How do I resize a chart dynamically in JSFiddle?

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.


1 Answers

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.

like image 182
Ricardo Alvaro Lohmann Avatar answered Oct 10 '22 12:10

Ricardo Alvaro Lohmann