CODEWITHSUNDEEP
jsonhighcharts
JoeGeeky
JoeGeeky

Reputation: 3796

Adding series markers to highcharts area chart

I am attempting to create an area chart based on a timeline and everything works until I add a series marker. I have tried a few different patterns but can't get the chart to render with a marker.

Attempt 1: replace [x,y] item with [{x,y,marker}] object

data: [[1384219800000,2],
[{x:1384269600000,y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]

Attempt 2: replace [x,y] item with [x, {y,marker}] object

data: [[1384219800000,2],
[1384269600000, {y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]

This is the working area chart without the marker. This renders fine until I try to add the marker notation

$(function () {
        $('#container').highcharts({
                            chart: {
                    type: 'area'
                },
                title: {
                    style: {
                        display: 'none'
                    }
                },
                subtitle: {
                    style: {
                        display: 'none'
                    }
                },
                credits: {
                    enabled: false
                },
                xAxis: {
                    type: 'datetime'
                },
                yAxis: {
                    title: {
                        text: ''
                    },
                    min: 0,
                    minorGridLineWidth: 0,
                    gridLineWidth: 0,
                    alternateGridColor: null
                },
                legend: {
                    borderWidth: 0,
                    enabled: true,
                    align: 'right',
                    verticalAlign: 'top',
                    x: -5,
                    y: -15,
                    floating: true
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        marker: {
                            lineWidth: 0,
                            lineColor: '#666666',
                            enabled: false
                        }
                    }
                },
                series:
                [{
                    name: 'Items',
                    color: '#3399CC',
                    data: [[1384219800000,2],[1384269600000,7],[1384279900000,1]]
                }],
                navigation:
                {
                    menuItemStyle: {
                        fontSize: '10px'
                    }
                },
                navigator: {
                    enabled: true
                },
                scrollbar: {
                    enabled: false
                },
                rangeSelector: {
                    enabled: false
                }
        });
    });

Upvotes: 1

Views: 1076

Answers (1)

Mark
Mark

Reputation: 108537

Your first syntax is close to correct, except you need to drop the [] around the {} and enable the marker for that specific point:

data: [
  [1384219800000,2],
  {
    x:1384269600000,
    y:7,
    marker:{
      enabled: true, 
      symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"
    }
   },
   [1384279900000,1]
]

Fiddle here.

Upvotes: 5

Related Questions