Develop Reference

Is it possible to use pure CSS to control the color of each area in the highchart polar chart (series.type=column)?

What I expect:
Code and demo:
Highcharts.chart('container', {
chart: {
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
subtitle: {
text: 'Also known as Radar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
format: '{value}°'
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}]
});
.highcharts-figure,
.highcharts-data-table table {
min-width: 320px;
max-width: 660px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
A polar chart showing different series types on a radial axis. Polar
charts, also known as a radar charts, are often used to compare
multivariate data sets. A polar chart in Highcharts is simply a
cartesian chart where the X axis is wrapped around the perimeter. It
can render common cartesian series types like line, column, area or
arearange.
</p>
</figure>

This should work
Highcharts.chart('container', {
chart: {
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
subtitle: {
text: 'Also known as Radar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
format: '{value}°'
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}]
});
.highcharts-figure,
.highcharts-data-table table {
min-width: 320px;
max-width: 660px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
/*You can change the color using this selector*/
.highcharts-series-group path{
fill: red !important;
}
.highcharts-series-group path:hover{
opacity: 0.6
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
A polar chart showing different series types on a radial axis. Polar
charts, also known as a radar charts, are often used to compare
multivariate data sets. A polar chart in Highcharts is simply a
cartesian chart where the X axis is wrapped around the perimeter. It
can render common cartesian series types like line, column, area or
arearange.
</p>
</figure>

The simplest way is to enable the colorByPoint option and define colors array:
colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'],
plotOptions: {
column: {
...
colorByPoint: true
}
},
...
Live demo: http://jsfiddle.net/BlackLabel/5h09mwy2/
API Reference:
https://api.highcharts.com/highcharts/colors
https://api.highcharts.com/highcharts/series.column.colorByPoint
If you need to do that by CSS only, you can use:
.highcharts-series-0 path:nth-child(1) {
fill: red;
}
.highcharts-series-0 path:nth-child(2) {
fill: orange;
}
.highcharts-series-0 path:nth-child(3) {
fill: yellow;
}
Live demo: http://jsfiddle.net/BlackLabel/8cmv2edz/

Changing the resizable snap amount

Using gridstack, I can resize my widgets. However, when dragging on the widgets' handles, the widget's size will snap to specific sizes. This seems like a fixed amount. If I wanted to set the widget's size to one in between the specific sizes I am unable to do that since it snaps to that specific size.
Is there any way to change the scaling on this so the snapping can happen at smaller intervals?
Sorry, I'm quite new and I've been playing around using a demo I found on codepen, https://codepen.io/AKay/pen/GZXEJx, but am unable to figure out how to do so.
HTML:
<body>
<section class="darklue" id="demo">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Tile drop</h2>
</div>
</div>
<div class="row">
<div class="col-lg-2 grid-container sidebar-scroll">
<div class="sidebar grid-stack-1"></div>
</div>
<div class="col-lg-10 grid-container">
<div class="grid-stack grid-stack-4"></div>
</div>
</div>
</div>
</section>
</body>
CSS:
body {
background: #2c3e50;
color: #fff;
}
.sidebar {
/* background: lightblue; */
height: 100%;
}
.grid-stack {
/* background: #66a3ff; */
}
.sidebar-scroll {
overflow-y: scroll;
}
.grid-container {
padding-top: 15px;
padding-bottom: 15px;
height: 542px;
background: grey;
}
.sidebar .grid-stack-item {
text-align: center;
line-height: 100px;
z-index: 10;
cursor: grab;
display: inline-block;
}
.grid-stack-item-content {
background: white;
color: #2c3e50;
font-family: 'Indie Flower';
text-align: center;
font-size: 20px;
}
.grid-stack .grid-stack-item[data-gs-width="4"] {
width: 100%
}
.grid-stack .grid-stack-item[data-gs-width="3"] {
width: 75%
}
.grid-stack .grid-stack-item[data-gs-width="2"] {
width: 50%
}
.grid-stack .grid-stack-item[data-gs-width="1"] {
width: 25%
}
.grid-stack .grid-stack-item[data-gs-x="3"] {
left: 75%
}
.grid-stack .grid-stack-item[data-gs-x="2"] {
left: 50%
}
.grid-stack .grid-stack-item[data-gs-x="1"] {
left: 25%
}
.sidebar .grid-stack-item[data-gs-width="1"] {
width: 100%
}
JS:
$(function() {
var options = {
float: true,
width: 4,
height: 4,
animate: true,
always_show_resize_handle: true,
cellHeight: 110,
verticalMargin: 18,
horizontalMargin: 9,
placeholder_class: 'grid-stack-placeholder',
acceptWidgets: '.grid-stack-item'
};
$('.grid-stack').gridstack(_.defaults(options));
var items = [{
x: 0,
y: 0,
width: 1,
height: 1
}, {
x: 1,
y: 0,
width: 1,
height: 1
}, {
x: 2,
y: 0,
width: 1,
height: 1
}, {
x: 0,
y: 1,
width: 1,
height: 1
}, {
x: 3,
y: 1,
width: 1,
height: 1
}, {
x: 1,
y: 2,
width: 1,
height: 1
}];
$('.grid-stack').each(function() {
var grid = $(this).data('gridstack');
_.each(items, function(node) {
grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
node.x, node.y, node.width, node.height);
}, this);
});
var sidebar_options = {
float: true,
width: 1,
cellHeight: 110,
verticalMargin: 18,
horizontalMargin: 9,
placeholder_class: 'grid-stack-placeholder',
};
$('.sidebar').gridstack(_.defaults(sidebar_options));
var droppables = [{
x: 0,
y: 0,
width: 1,
height: 1
}];
$('.sidebar').each(function() {
var sidebar = $(this).data('gridstack');
_.each(droppables, function(node) {
sidebar.addWidget($('<div><div class="grid-stack-item-content">I\'m new</div></div>'),
node.x, node.y, node.width, node.height);
}, this);
});
});

Unable to update datatable in Highcharts

Continuation of what I thought was resolved a couple of months ago:
A new datatable is rendered each time when called in Ajax response [Highcharts]
$(function() {
Highcharts.setOptions({
lang: {
exportData: {
categoryHeader: 'Vulnerability'
}
}
});
$('#container').highcharts({
chart: {
//plotBackgroundColor: null,
//plotBorderWidth: null,
//plotShadow: false,
evsents: {
load: Highcharts.drawTable
},
height: 400,
width: 800,
//marginBottom: 250
},
title: {
text: undefined
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
showInLegend: true,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: -50,
connectorColor: '#000000',
format: '<br>{point.percentage:.1f} %<br>Count: {point.y}'
}
}
},
exporting: {
showTable: true,
tableCaption: false
},
series: [{
type: 'pie',
name: 'Counts',
data: [{
y: 4,
name: 'high',
}, {
y: 8,
name: 'medium',
}, {
y: 2,
name: 'low'
}]
}]
});
});
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
position: absolute;
top: 200px;
left: 20px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Overview:
I have a condition where I need to update highcharts datatable every time when the change event is triggered.
http://jsfiddle.net/BlackLabel/s7m0tvpy/
This was working perfectly before in which clicking the update button changes 4,8,2 to 0,0,1.
But quite recently, this is not working.
Is it something that update function has been modified?
Any help would be appreciated.

This issue was due to
https://github.com/highcharts/highcharts/issues/14320
However, it still works in 8.1.2 version.
<script src="https://code.highcharts.com/8.1.2/highcharts.js"></script>
<script src="https://code.highcharts.com/8.1.2/modules/exporting.js"></script>
<script src="https://code.highcharts.com/8.1.2/modules/export-data.js"></script>

How to Create Custom Tooltips

I am extremely new to HTML, JavaScript, and any other coding-related matters. However, I have been relying on tutorials to get a website up for a school project. I managed to use the jQuery library to get my line graph up (from chart.js), but I would also like to be able to allow for tooltips over my content. (specifically, this one) I am having trouble to allow for the tooltips to show up, and I'm wondering how I may fix this, as I am unable to find any tutorials. I previously tried using chart.js together with powertip.js as well, which is another jquery plugin.
Here is my code:
<head>
<title>get1030 project</title>
<style>
#font-face {
font-family: "brandon";
src: url('Brandon_reg.otf') format('opentype');
}
body {
font-family: "brandon", helvetica, sans-serif;
background-color: #f3f3f3;
}
#container {
max-width: 900px;
margin: 0 auto;
background-color: #fff;
padding: 32px;
}
header {
background-color: #336699;
height: 150px;
padding: 4px;
}
header h1 {
text-transform: lowercase;
text-align: center;
color: #fff;
line-height: 60px;
}
header h2 {
text-transform: lowercase;
line-height: 2px;
font-size: 18px;
text-align: center;
color: #fff;
}
nav {
padding: 5px 0 5px 0;
text-align: center;
line-height: 35px;
background-color: #818181;
}
nav ul {
margin-top: 20px;
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
nav ul li {
display: inline-block;
padding: 0 22px 0 22px;
font-size: 17px;
}
nav a {
text-decoration: none;
color: #fff;
padding: 8px;
font-variant: small-caps;
}
nav a:hover {
color: #336699;
}
nav ul li:hover ul{
display: block;
}
nav ul ul {
display: none;
position: absolute;
background-color: #333;
margin-left: -33px;
}
nav ul ul li {
display: block;
font-size: 15px;
}
#linechart1 {
position: relative;
left: 40px;
}
#legend ul {
list-style: none;
font-size: 12px;
}
#legend ul li {
display: inline;
padding: 13px;
}
#graphtitle {
position: relative;
left: 40px;
text-decoration: underline;
}
#linechart1 {
position: relative;
left: 40px;
}
#legend ul {
list-style: none;
font-size: 12px;
}
#legend ul li {
display: inline;
padding: 13px;
}
h3 {
margin-left: 40px;
}
article {
margin-left: 40px;
margin-right: 40px;
}
</style>
<script src="jquery-2.2.1.min.js"></script>
<script src="Chart.js"></script>
<script src="html5tooltips.1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="html5tooltips.animation.css" />
<link rel="stylesheet" type="text/css" href="html5tooltips.css" />
</head>
<body>
<div id="container">
<header>
<h1>stereotypes of women in popular music lyrics</h1>
<h2>a digital humanities project</h2>
</header>
<nav>
<ul>
<li>home</li><li>
overview</li><li>
stereotypes
<ul>
<li>sex objects</li>
<li>emotional/weak</li>
<li>femme fatales</li>
<li>toxic</li>
</ul>
</li><li>
against the stereotype</li><li>
references</li>
</ul>
</nav>
<h3>methodology:</h3>
<article>
The lyrics of the top 40 songs of each year over the past decade (2007-2016) were reviewed to identify several common portrayals of women. The top 40 songs (insert tool tip or popup) was retrieved from <span data-tooltip="Refresh" data-tooltip-stickto="right" data-tooltip-color="bamboo" data-tooltip-animate-function="foldin">refresh</span> (pop up for billboard) year-end charts (charting methods) of the 'Hot 100' songs; except for the year 2016, where the chart for the week of March 26 2016 was used.
<br><br>
</article><br>
<div id="graphtitle">
<strong>top 40s over the past 10 years</strong>
</div><br>
<div style="width: 100%; height: 100%;">
<canvas id="linechart1" width="800" height "1500""></canvas>
</div>
<div id="legend"></div>
<script>
$(function () {
var data = {
labels: ["2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015",
"2016"],
datasets: [
{
label: "women as femme fatales",
fillColor: "rgba(255, 229, 229, 0.2)",
strokeColor: "#ffcccc",
pointColor: "#ffb3b3",
pointStrokeColor: "#994D4D",
pointHighlightFill: "#fff",
pointHighlightStroke: "#ffb3b3",
data: [3, 6, 5, 3, 8, 1, 1, 6, 4, 2]
},
{
label: "women as emotional and weak",
fillColor: "rgba(229, 255, 229, 0.2)",
strokeColor: "#ccffcc",
pointColor: "#b3ffb3",
pointStrokeColor: "#4D994D",
pointHighlightFill: "#fff",
pointHighlightStroke: "#b3ffb3",
data: [4, 6, 5, 6, 3, 4, 4, 4, 3, 8]
},
{
label: "women as men's possessions/sex objects",
fillColor: "rgba(255, 247, 229, 0.2)",
strokeColor: "#ffeecc",
pointColor: "#ffe6b3",
pointStrokeColor: "#99804D",
pointHighlightFill: "#fff",
pointHighlightStroke: "#ffe6b3",
data: [10, 9, 11, 8, 8, 7, 7, 8, 10, 13]
},
{
label: "women as strong and independent",
fillColor: "rgba(229, 247, 255, 0.2)",
strokeColor: "#cceeff",
pointColor: "#b3e6ff",
pointStrokeColor: "#4D8099",
pointHighlightFill: "#fff",
pointHighlightStroke: "#b3e6ff",
data: [2, 3, 2, 1, 5, 5, 2, 5, 2, 1]
},
{
label: "women as toxic",
fillColor: "rgba(238, 229, 255, 0.2)",
strokeColor: "#ddccff",
pointColor: "#ccb3ff",
pointStrokeColor: "#664D99",
pointHighlightFill: "#fff",
pointHighlightStroke: "#ccb3ff",
data: [0, 0, 0, 0, 1, 0, 1, 0, 1, 1]
}
]
};
var option = {
pointDot : true,
scaleGridLineWidth : 1,
};
var ctx = $("#linechart1").get(0).getContext("2d");
var myLineChart = new Chart(ctx).Line(data, option);
document.getElementById('legend').innerHTML = myLineChart.generateLegend();
});
html5tooltips({
animateFunction: "spin",
color: "bamboo",
contentText: "Refresh",
stickTo: "right",
targetSelector: "#refresh"
});
</script>
<br>
<article>
As seen in the graph above, the number of songs that feature the sexual objectification of women is consistently the highest in the top 40s over the past ten years.
</article>
</body>
According to the README file for html5tooltip.js,
this is what I am supposed to do, but the tooltip does not show up
Thank you in advance, and I am really sorry if this is not clear! I have been spending hours on this.

Try changing your span tag by giving a id="refresh"
<span id="refresh" data-tooltip="Refresh" data-tooltip-stickto="right" data-tooltip-color="bamboo" data-tooltip-animate-function="foldin">refresh</span>
working fiddle - https://jsfiddle.net/Lcrgohvg/

How to add Marker in jVectorMap?

I'm new to jVectorMap. I've already got the google map from the link: http://codepen.io/anon/pen/RPjJYb. I'm trying to add markers to this map.
I tried the following code but couldn't add marker to the map:
$('#vmap').vectorMap({
map: 'usa_en',
backgroundColor: null,
color: '#D2D3D4', //#F58025
hoverColor: '#754200',
selectedColor: '#F58025',
borderColor: '#FFFFFF',
enableZoom: false,
showTooltip: false,
regionsSelectable: true,
markersSelectable: true,
markerStyle: {
initial: {
fill: 'grey',
stroke: '#505050',
"fill-opacity": 1,
"stroke-width": 1,
"stroke-opacity": 1,
r: 5
},
hover: {
stroke: 'black',
"stroke-width": 2
},
selected: {
fill: 'blue'
},
selectedHover: {
}
},
markers: [
{latLng: [41.8781136,-87.6297982], name: "My marker name",style: {fill: 'yellow'}},
],
onRegionClick: function(element, code)
{
alert(code);
}
});
Please help me. Thanks in advance.

You are not using jVectormap, but jqvmap. I don't think it implements markers.
You can switch to jVectorMap, it's a bit different, but it has markers like: http://jvectormap.com/examples/markers-world/
Simple demo: http://jsfiddle.net/IrvinDominin/96o28qnh/

as #Irvin Dominin said jqvmap does not implement markers so try using jVectormap they are lot alike.
$(document).ready(function(){
$('#vmap').vectorMap({
map: 'us_aea_en',
backgroundColor: '#00ff11',
color: '#D2D3D4', //#F58025
hoverColor: '#754200',
selectedColor: '#F58025',
borderColor: '#FFFFFF',
enableZoom: false,
showTooltip: false,
regionsSelectable: true,
markersSelectable: true,
hoverOpacity: 0.7,
markersSelectable: true,
markerStyle: {
initial: {
fill: 'grey',
stroke: '#505050',
"fill-opacity": 1,
"stroke-width": 1,
"stroke-opacity": 1,
r: 5
},
hover: {
stroke: 'black',
"stroke-width": 2
},
selected: {
fill: 'blue'
},
selectedHover: {
}
},
markers: [
{latLng: [41.8781136,-87.6297982], name: "My marker name",style: {fill: 'yellow'}},
],
onRegionClick: function(element, code)
{
alert(code);
}
});
});
.jvectormap-label {
position: absolute;
display: none;
border: solid 1px #CDCDCD;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #292929;
color: white;
font-family: sans-serif, Verdana;
font-size: smaller;
padding: 3px;
}
.jvectormap-zoomin, .jvectormap-zoomout {
position: absolute;
left: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #292929;
padding: 3px;
color: white;
width: 10px;
height: 10px;
cursor: pointer;
line-height: 10px;
text-align: center;
}
.jvectormap-zoomin {
top: 10px;
}
.jvectormap-zoomout {
top: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://demo.omnigon.com/christian_bovine/showtime/js/jquery-jvectormap-1.1.1.min.js"></script>
<script src="http://demo.omnigon.com/christian_bovine/showtime/js/jquery.jvectormap-us.js"></script>
<div id="vmap" style="width: 600px; height: 600px;"></div>