Develop Reference

Create Dynamic High chart On Group By Data Set

I've a below dataset:
var data = [{
"France": {
"val1": [10, 20, 30, 40],
"val2": [10, 20, 30, 4]
},
"Croatia": {
"val1": [50, 60, 70, 80],
"val2": [50, 60, 70, 8]}
}];
It's a group by data and my target is to create two dynamic high chart on the dataset given above. So one chart would be created on France dataset and other one is Croatia with their respective values val1 and val2. I was trying something as follows:
var data = [{
"France": {
"val1": [10, 20, 30, 40],
"val2": [10, 20, 30, 4]
},
"Croatia": {
"val1": [50, 60, 70, 80],
"val2": [50, 60, 70, 8]}
}];
for(var i = 0; i <= data.length; i++) {
console.log(data[i].France);
console.log(data[i].Croatia);
console.log(data.length);
var val = i + 1;
var containerName = 'container' + val;
console.log(containerName);
Highcharts.chart(containerName, {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'France',
data: data[0].France.val2
}, {
name: 'Croatia',
data: data[0].Croatia.val2
}]
});
}
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
#container {
height: 400px;
}
.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/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>
<div id="container1">
</div>
<div id="container2">
</div>
Is it possible to create two different charts according to their respective data set? Here's a Js fiddle that I tried but failed: Js Fiddle

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/

X axis scrollbar hidden at the bottom inside of vertical scroll

Exactly as the title says, my overflow-x scrollbar is hidden at the bottom of the overflow y scrollbar. Is there anyway to fix this?
Right now the height and width are coming from the parent .wrapper div, but the overflow-x, while commented out, seems to be automatically set to scroll.
Any advice would be greatly appreciated!
Codesandbox
<template>
<div class="wrapper">
<vue-good-table
style="width: 100%"
class="issue-tracker-style"
:columns="columns"
:rows="rows"
:sort-options="{
enabled: false,
}"
>
<template v-slot:table-row="scope">
<div>
<div>{{ scope.formattedRow[scope.column.field] }}</div>
</div>
</template>
</vue-good-table>
</div>
</template>
<script>
export default {
name: "my-component",
mounted: function () {
let tdElm;
let startOffset;
Array.prototype.forEach.call(
document.querySelectorAll("table th"),
function (td) {
td.style.position = "relative";
//td.style.maxWidth = "unset";
let grip = document.createElement("div");
grip.innerHTML = " ";
grip.style.position = "absolute";
grip.style.top = 0;
grip.style.right = 0;
grip.style.bottom = 0;
grip.style.width = "5px";
// grip.style.background = "red";
grip.style.cursor = "col-resize";
grip.addEventListener("mousedown", function (e) {
tdElm = td;
startOffset = td.offsetWidth - e.pageX;
});
td.appendChild(grip);
}
);
document.addEventListener("mousemove", function (e) {
if (tdElm) {
tdElm.style.minWidth = startOffset + e.pageX + "px";
}
});
document.addEventListener("mouseup", function () {
tdElm = undefined;
});
},
data() {
return {
columns: [
{
label: "Name",
field: "name",
//width: "100px"
},
{
label: "Age",
field: "age",
type: "number",
},
{
label: "Created On",
field: "createdAt",
dateInputFormat: "yyyy-MM-dd",
dateOutputFormat: "MMM do yy",
},
{
label: "Percent",
field: "score",
type: "percentage",
},
{
label: "Name",
field: "name",
},
{
label: "Age",
field: "age",
type: "number",
},
{
label: "Created On",
field: "createdAt",
dateInputFormat: "yyyy-MM-dd",
dateOutputFormat: "MMM do yy",
},
{
label: "Percent",
field: "score",
type: "percentage",
},
{
label: "Name",
field: "name",
},
{
label: "Age",
field: "age",
type: "number",
},
{
label: "Created On",
field: "createdAt",
dateInputFormat: "yyyy-MM-dd",
dateOutputFormat: "MMM do yy",
},
{
label: "Percent",
field: "score",
type: "percentage",
},
],
rows: [
{ id: 1, name: "John", age: 20, createdAt: "", score: 0.03343 },
{
id: 2,
name: "Jane Jacob Johnson OOOO",
age: 24,
createdAt: "2011-10-31",
score: 0.03343,
},
{
id: 3,
name: "Susan",
age: 16,
createdAt: "2011-10-30",
score: 0.03343,
},
{
id: 4,
name: "Chris",
age: 55,
createdAt: "2011-10-11",
score: 0.03343,
},
{
id: 5,
name: "Dan",
age: 40,
createdAt: "2011-10-21",
score: 0.03343,
},
{
id: 6,
name: "John",
age: 20,
createdAt: "2011-10-31",
score: 0.03343,
},
{
id: 3,
name: "Susan",
age: 16,
createdAt: "2011-10-30",
score: 0.03343,
},
{
id: 4,
name: "Chris",
age: 55,
createdAt: "2011-10-11",
score: 0.03343,
},
{
id: 5,
name: "Dan",
age: 40,
createdAt: "2011-10-21",
score: 0.03343,
},
{
id: 6,
name: "John",
age: 20,
createdAt: "2011-10-31",
score: 0.03343,
},
],
};
},
};
</script>
<style lang="scss">
.wrapper {
border: 1px solid red;
width: 400px;
height: 200px;
overflow-y: scroll;
/* overflow-x: scroll; */
}
body {
display: flex;
justify-content: center;
margin-top: 5rem;
}
.issue-tracker-style {
font-family: "Inter";
width: 100%;
.vgt-inner-wrap {
box-shadow: none;
}
td > div {
position: relative;
width: 100%;
height: 100%;
}
td > div > div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
thead {
border: 1px solid #f0f7ff;
}
tr {
background: white;
margin: 0;
height: 32px; // height works like min-height apparently https://stackoverflow.com/questions/19432092/can-i-use-a-min-height-for-table-tr-or-td/37115413
}
td {
min-width: 70px;
overflow: hidden;
white-space: nowrap;
-moz-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
tr th {
color: #4859af;
font-weight: 600;
height: 100%;
vertical-align: middle;
padding: 0.5rem 0;
font-size: 13px;
background: #fafafa;
border: 2px solid #efeff0;
text-align: center;
overflow: hidden;
white-space: nowrap;
-moz-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
tr td {
padding: 0;
font-size: 13px;
color: #4859af;
background: white;
border: 2px solid #efeff0;
height: 42px;
vertical-align: middle;
}
tr td,
tr th {
text-align: center;
}
/*tr th {
width: 60px !important;
}*/
}
</style>

this css should fix the problem
.wrapper {
border: 1px solid red;
width: 400px;
height: 200px;
overflow: scroll;
}
.vgt-responsive {
overflow: visible!important;
}
The scrollbar hidden at the bottom comes from the .vgt-responsive class.

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>

HighChart Data Table Custom Export

I am trying to create a line-chart using HighCharts.js which should be showing the data in tabular format too. But data has to be grouped instead of exact input for the graph.
Normal export shows the exact input data.
like Jan - 0, Feb - 2 etc..
But I want to show a table where it suggest how many months are there where data is 0, 1, 2 ,3.
+------+-------+
| Data | Count |
+------+-------+
| 0 | 2 |
+------+-------+
| 1 | 2 |
+------+-------+
| 2 | 4 |
+------+-------+
| 3 | 1 |
+------+-------+
Highcharts.chart('container', {
title: {
text: 'Data Table Example'
},
chart: {
borderWidth: 1,
borderColor: '#ccc',
spacingBottom: 30
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [0, 2, 1, 3, 2, 2, 1, 0, 2],
}],
exporting: {
showTable: true
}
});
.chart-outer {
max-width: 800px;
margin: 2em auto;
}
#container {
height: 300px;
margin-top: 2em;
min-width: 380px;
}
.highcharts-data-table table {
border-collapse: collapse;
border-spacing: 0;
background: white;
min-width: 100%;
margin-top: 10px;
font-family: sans-serif;
font-size: 0.9em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
border: 1px solid silver;
padding: 0.5em;
}
.highcharts-data-table tr:nth-child(even), .highcharts-data-table thead tr {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #eff;
}
.highcharts-data-table caption {
border-bottom: none;
font-size: 1.1em;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div class="chart-outer">
<div id="container"></div>
<!-- data table is inserted here -->
</div>
Update: we are using Json Object as input for our chart and the table has be be exported as well with the highchart export option.