CODEWITHSUNDEEP
highcharts
user2081195
user2081195

Reputation: 13

highcharts special marker on column chart

My question is similar to the one in Highcharts: Show special marker on column chart

I have a column chart, which is a histogram of mutual fund returns in a specific period.I want to highlight where the Mutual Fund of interest falls with a special marker.

Say for example, i have -50 to -25, -25 to 0, 0 to 10, 10 to 20, 20 to 30, and 30 to 50 on my x axis, and corresponding Y values. I want to highlight with a marker on '20 to 30' to show that the Mutual Fund of interest falls into that bucket. I know we can do this using spline chart like http://www.highcharts.com/demo/spline-symbols.

Is there a way to do the same for column charts ??

Upvotes: 1

Views: 3347

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

In general you can't add custom marker to the column chart, but you can add similar behavior. I've created simple example with custom marker for scatter series, useful if you want to add more series into legends: http://jsbin.com/oyudan/37/edit (if not, just set showInLegend: false)

Highcharts.updateMarketMarkers = function (chart) {
    /* get category width */
    var catWidth = chart.xAxis[0].width / chart.xAxis[0].categories.length;
    /* get padding of each column (two sides) */
    var catPadding = chart.series[0].options.pointPadding * catWidth;
    /* actual value - padding - symbol width/2 */ 
    chart.series[2].markerGroup.translate(chart.series[2].markerGroup.translateX - 2 * catPadding - chart.series[2].data[0].shapeArgs.r / 2);
};
chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column',
        showAxes: false,
        events: {
            load: function () {
                Highcharts.updateMarketMarkers(this);
            },
            redraw: function () {
                Highcharts.updateMarketMarkers(this);
            }
        }
    },
    ...

Another solution is to use Highcharts renderer to draw custom shapes at specific place. Here you can find more about renderer: http://api.highcharts.com/highcharts#Renderer

Upvotes: 2

Related Questions