Hyperlink Bar Chart in Highcharter

How to hyperlink bar graph in highcharts

Here is the url of the documentation on how to do this: http://api.highcharts.com/highcharts#plotOptions.series.point.events.click

Here is a good sample: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-url/

The part of your code you want to update is here:

plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        },
        series: {
            point: {
                events: {
                    click: function(){
                       // do whatever here
                    }
                }
            }
        }

    }

Hyperlink bar chart in Highcharter

Andrew,

You have some (2) errors replicating the example:

If you check carefully the example you gave. The point argument lives at the same depth of cursor in the series argument.
You didn't add the data in the correct way (like the vignette show).

A fixed version of your code is:

highchart() %>%
  hc_chart(type = "column") %>%
  hc_title(text = "Click points to go to URL") %>%
  hc_xAxis(type = "category") %>%
  hc_plotOptions(
    series = list(
      cursor = "pointer",
      point = list(
        events = list(
          click = JS( "function () { location.href = 'https://en.wikipedia.org/wiki/' + this.options.key; }")
          )
        )
      )
    ) %>%
  hc_series(
    list(
      data = list(
        list(name = "USA", key = "United_States", y = 29.9),
        list(name = "Canada", key = "Canada", y = 71.5),
        list(name = "Mexico", key = "Mexico", y = 106.4)
        )
      )
  )

And a better version to add the data would be:

dat <- data.frame(
  country = c("USA", "Canada", "Mexico"),
  url = c("United_States", "Canada", "Mexico"),
  value = c(29.9, 71.5, 106.4)
)

highchart() %>%
  hc_xAxis(type = "category") %>%
  hc_plotOptions(
    series = list(
      cursor = "pointer",
      point = list(
        events = list(
          click = JS( "function () { location.href = 'https://en.wikipedia.org/wiki/' + this.options.key; }")
          )
        )
      )
    ) %>%
  hc_add_series(data = dat, type = "column", mapping = hcaes(name = country, key = url, y = value))

Hope its helps

Highchart: add href to each segment of stacked bar chart

I am not completely sure if you want a url per color (serie) or per true segment (point). Thus I made a hybrid one.

Let's say for some series you need to have link per serie and for another link per point. The former looks more natural if URL is provided together with point value.

seriesData.push({
    name: "Por cursar",
    data: [{y:1, url:'http://facebook.com'}, {y:2, url:'http://google.com'}, {y:3, url: 'http://amazon.com'}]
});
seriesData.push({
    name: "Acreditados",
    data: [1, 2, 3],
    url: "http://cnn.com"
});

This case you click handler must be

 point: {
   events: {
     click: function () {
       var point = this;

       if (point.url) { //if url is per point as in Por cursar
         window.open(point.url);
       } else if (point.series.userOptions.url){ //if url is per serie as in Acreditados
         window.open(point.series.userOptions.url);
       }
     }
   }
 }

Conplete sample can be found here http://plnkr.co/edit/j3NgoNWa6rwPgBGIJDwm

Links in Y-Axis of stacked bar chart

You can give anchor<a> tags in the categories array of xAxis. With specifying the link in it.like this:

     categories: ['<a href="http://stackoverflow.com">Test 2',
 '<a href="http://stackoverflow.com/questions">Test 5</a>']

Sample code: I have given links to Test 2 and Test 5 in this sample:

Highcharts.chart('container', {    chart: {        type: 'bar'    },    title: {        text: ''    },    colors: ['#c83f3f', '#66b257'],        fontFamily: 'Merriweather Sans, sans-serif',        xAxis: {        categories: ['Test 1', '<a href="http://stackoverflow.com">Test 2', 'Test 3', 'Test 4', '<a href="http://stackoverflow.com/questions">Test 5</a>', 'Test 6', 'Test 7', 'Test 8']    },    yAxis: {        min: 0,        max: 10,        title: {            text: ''        }    },    legend: {        reversed: true    },    plotOptions: {        series: {            stacking: 'normal'        }    },    series: [{        name: 'Nicht erfüllte Kriterien',        data: [5, 3, 4, 7, 2, 6, 4, 5]    }, {        name: 'Erfüllte Kriterien',        data: [5, 7, 6, 3, 8, 4, 6, 5]    }]});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script src="https://code.highcharts.com/highcharts.js"></script><div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Highcharts adding url to column chart

You need to adapt your data to create objects as points, like in the example:

{y:10,url:'http://google.com'}

and then catch click event on serie's point.

http://jsfiddle.net/2tL5T/

create link for any element in categories Highcharts widget

Few Things you need to look at

You are using options option whereas you should use the clientOptions (if you are using this widget i suppose https://github.com/2amigos/yii2-highcharts-widget)
You are using the useHtml in the wrong place it should be under labels option and not the categories, also you should pass a boolean to the useHtml means without the quotes true should be passed.

Your complete code should look like below

<?php

use yii\web\JsExpression;
use dosamigos\highcharts\HighCharts;

$x = array("a", "b", "c");
$y = array_values(array(4, 2, 6));

echo HighCharts::widget([
    'clientOptions' => [
        'chart' => [
            'type' => 'column',
            'zoomType' => 'x',
        ],
        'title' => [
            'text' => 'Project chart',
        ],
        'xAxis' => [
            'categories' => $x,
            'labels' => [
                'formatter' => new JsExpression('function(){ return "<a href=hghgh><b>"+this.value+" bgbgbg</b></a>"; }'),
                'useHTML' => true,
            ],
        ],
        'yAxis' => [
            'title' => [
                'text' => 'Count',
            ],
        ],

        'series' => [
            [
                'type' => 'column',
                'name' => 'p1',
                'data' => $y,
            ],
        ],
    ],
]);

Creating an index bar chart in Highcharter

After checking examples on highcharter website I changed the charttype to columnrange and added new vars low and high to the dataframe. Try this:

library(highcharter)
library(dplyr)

States <- c('Tennessee','Michigan','Indiana','Ohio','Kentucky','West Virginia','North Carolina','Virginia','Pennsylvania','Delaware','New Jersey','Maryland','New York')
Cost_of_Living <- c(88.7,88.9,90,90.8,90.9,91.1,94.9,100.7,101.7,108.1,125.1,129.7,139.1)
costliving <- data.frame(States, Cost_of_Living) %>% 
  mutate(low = pmin(Cost_of_Living, 100),
         high = pmax(Cost_of_Living, 100))

costliving_graph <- highchart() %>% 
  hc_title(text = "Cost of Living by State (2020)") %>%
  hc_add_series(costliving, "columnrange", hcaes(x = States, y = Cost_of_Living, low = low, high = high)) %>%
  hc_xAxis(categories = costliving$States) %>%
  hc_yAxis(title = list(text = "Indexed to the U.S. (U.S. Value = 100)"))%>%
  hc_plotOptions (bar = list(colorByPoint = TRUE)) %>%
  hc_legend (enabled = FALSE)%>%
  hc_tooltip(pointFormat = "MSA Regional Price Parities: {point.y}", headerFormat ="")
costliving_graph