Highcharts Marker Graph

Highcharts Marker Graph is a chart type that displays a set of data points as markers on a chart with customizable appearance. To create a Marker Graph using Highcharts, you can follow these steps:

Include the Highcharts library in your HTML file. You can either download it from the Highcharts website or include it from a CDN like this:

<script src="https://code.highcharts.com/highcharts.js"></script>

Create a container element for the chart in your HTML file, like this:

<div id="chart-container"></div>

In your JavaScript code, create a Highcharts chart object and configure it with the data and chart options. For example:

Highcharts.chart('chart-container', {
  chart: {
    type: 'scatter'
  },
  title: {
    text: 'Marker Graph'
  },
  xAxis: {
    title: {
      text: 'X Axis Label'
    }
  },
  yAxis: {
    title: {
      text: 'Y Axis Label'
    }
  },
  series: [{
    name: 'Series Name',
    color: '#FF0000',
    marker: {
      symbol: 'circle',
      radius: 5
    },
    data: [
      [1, 5],
      [2, 10],
      [3, 15],
      [4, 20],
      [5, 25]
    ]
  }]
});

In this example, we're creating a Marker Graph with the Highcharts chart function and passing in a set of options:

chart.type is set to 'scatter' to create a scatter chart with markers
title.text is set to 'Marker Graph' to set the main title
xAxis.title is used to set the label for the x-axis
yAxis.title is used to set the label for the y-axis
series is set to an array of objects with a name, color, marker, and data property to define the series data and appearance. The marker property is used to customize the appearance of the markers, including the symbol (shape) and radius.

With these options, you can create a Marker Graph with customizable data and appearance. The marker property can be used to customize the appearance of the markers with different shapes, sizes, and colors. Highcharts also supports other marker chart types like bubble and scatterLine.

Customizing appearance in Highcharts Marker Graph: To customize the appearance of a Marker Graph in Highcharts, you can use various options like marker type, size, color, and more. Here's an example code snippet:

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    plotOptions: {
        series: {
            marker: {
                symbol: 'diamond', // Marker type
                radius: 8,          // Marker size
                fillColor: 'red',   // Marker fill color
                lineColor: 'black'   // Marker border color
            }
        }
    },
    series: [{
        name: 'Marker Data',
        data: [10, 15, 20, 25, 30]
    }]
});

Adding data to Highcharts Marker Graph: Adding data to a Marker Graph is similar to other line charts. Use the data property within the series object. Here's an example:
```
series: [{
    name: 'Marker Data',
    data: [10, 15, 20, 25, 30]
}]
```

Stacked Marker Graph in Highcharts: To create a stacked Marker Graph, you can set the stacking property in the plot options. Here's an example:

plotOptions: {
    series: {
        stacking: 'normal'
    }
},
series: [{
    name: 'Category 1',
    data: [10, 15, 20, 25, 30]
}, {
    name: 'Category 2',
    data: [5, 10, 15, 20, 25]
}]

Grouped Marker Graph using Highcharts: To create a grouped Marker Graph, omit the stacking property. Here's an example:

plotOptions: {
    series: {
        // No stacking property for grouped chart
    }
},
series: [{
    name: 'Category 1',
    data: [10, 15, 20, 25, 30]
}, {
    name: 'Category 2',
    data: [5, 10, 15, 20, 25]
}]

Interactive features in Highcharts Marker Graph: Highcharts supports interactive features like tooltips, click events, and legends in Marker Graphs. You can enable these features to enhance user interaction. Here's a snippet for tooltip configuration:
```
tooltip: {
    pointFormat: 'Value: {point.y}'
}
```