Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

High Charts: Change each individual plot/marker size, is it possible?

I am trying to change the size of each plot on the following chart, is it possible?

I did try to change the line thickness however this made no difference to each individual plot on each line series.

series:{ [<%= GraphSeries4 %>],

                marker: {

                enabled: false

            },
                },

Graph series is a variable which collects data from an Sql database.

like image 930
Blob Avatar asked Apr 01 '12 15:04

Blob


People also ask

How to modify the markers of a chart at runtime?

For modifying the chart at runtime. See the class reference. Options for the point markers of line-like series. Properties like fillColor, lineColor and lineWidth define the visual appearance of the markers. Other series types, like column series, don't have markers, but have visual options on the series level instead.

How to adjust the size of marker in a plot?

plt.plot (data1, data2, marker=".") Example 2: To adjust the size of marker in a plot use markersize parameter to plot method to adjust the marker size. Here in this example, we adjusted the marker size to size 20 such that the maker size is increased from its standard size.

How do I style markers in Highcharts?

In styled mode, the markers can be styled with the .highcharts-point, .highcharts-point-hover and .highcharts-point-select class names. Enable or disable the point marker. If undefined, the markers are hidden when the data is dense, and shown for more widespread data points. Defaults to undefined.

What is marker size in Matplotlib scatter plot?

Here in this example, we adjusted the marker size to size 20 such that the maker size is increased from its standard size. scatter is a method present in matplotlib library which is used to set individual point sizes. It takes 3 parameters 2 data points and a list of marker point sizes.


1 Answers

Add lineWidth parameter in series list. See this jsFiddle code. Crucial code:

var chart = new Highcharts.Chart({
    // some other code
    series: [
        {
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 23.3, 18.3, 13.9, 9.6],
            lineWidth: 5
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 20.1, 14.1, 8.6, 2.5],
            lineWidth: 15
        }
    ]
}

Also see the documentation for possible parameters.

//EDIT

You can also change markers size on whole chart or single points. See this jsFiddle. And the code:

var chart = new Highcharts.Chart({
    // some other code
    series: [
        {
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 23.3, 18.3, 13.9, 9.6],
            // marker setting for all points in this series
            marker: {
                radius: 5
            },
            lineWidth: 5
        }, {
            name: 'New York',
            // marker setting for second point only
            data: [-0.2, { y: 0.8, marker: { radius: 15 }}, 5.7, 11.3, 17.0, 22.0, 20.1, 14.1, 8.6, 2.5],
            lineWidth: 15
        }
    ]
}
like image 179
freakish Avatar answered Nov 04 '22 09:11

freakish