Customize highcharts under the hood

Question

I'm working on a project with highcharts and got stuck customizing some detailed stuff inside the chart.

Here is the chart (with my needs):

I want to customize some of the labels (in the red circles), making them bold and bigger than the rest. I also want to change the style of those dots (in the green circles), making them bigger (or even replaced by a customized SVG graph) than the rest.

How do I achieve that? Is there any reference I need to read?

Thanks very much for any kind of tips!

---

Update, thanks for the great tips, I have made one step towards the target, but still have some questions, described in this picture:

Answer 1

Apparently you can achieve this through highchart api. You can specify a marker for each data point. http://api.highcharts.com/highcharts#series.data.marker

Increasing the radius of the marker of first point:

series: [{
            name: 'Allocated Budget',
            data: [{
                name: 'Point 1',
                color: '#00FF00',
                y: 43000,
              marker: {
                    radius: 8
                }
            }, 19000, 60000, 35000, 17000, 10000],
            pointPlacement: 'on'
        }

And you can change the style of each xaxis label through label property of the xAxis. I found the answer from the following post. Highchart - change color of one x-axis label only

Changing the font-size of 'Marketing' point

xAxis: {
        categories: ['Sales', 'Marketing', 'Development', 'Customer Support', 
                    'Information Technology', 'Administration'],
        tickmarkPlacement: 'on',
        lineWidth: 0,
        labels: {
                formatter: function () {
                    if ('Marketing' === this.value) {
                        return '<span style="fill: red;">' + this.value + '</span>';
                    } else {
                        return this.value;
                    }
                }
            }
        }

Demo

You can modify the tooltip according to your needs (which pops on mouse hover on points). Just take a look at the example on highchart api:

tooltip: {
            formatter: function() {
                return 'The value for <b>'+ this.x +
                    '</b> is <b>'+ this.y +'</b>';
            }
        }

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/formatter-simple/

For changing the hover style of marker just take a look at marker object of data series. Here is an example of where the marker point doesn't change on hover too:

The example from highchart api (Same radius for each point):

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-marker-states-hover-radius/

Keeping the size of marker radius on a single on point during a hover example:

data: [{
                name: 'Point 1',
                color: '#00FF00',
                y: 43000,
              marker: {
                    radius: 8,
                   states: {
                        hover: {
                            radius: 8
                        }
                    }
                }
            }, 19000, 60000, 35000, 17000, 10000]

If I were you I would dig deep into highchart api, it is a great library which provides almost any kind of functinonality that you would need in modifying charts.