Develop Reference

Chart.js How can I embed additional values to each data point in radar chart

With the line chart, I am able to embed additional data and have it show up in the tooltip. However, if I try to do the same with the radar chart no values are shown. How do I add essential information to each data-point on the radar chart and have it show up in the tooltip?
Below I have a working line chart with additional values for each data-point, displayed with the tooltip. Additionally I have the same chart duplicated with type: 'radar'
var data = [{
//x: 'Item 1',
y: 2,
id: 'test-10'
},
{
//x: 'Item 2',
y: 4,
id: 'test-20'
},
{
//x: 'Item 3',
y: 5,
id: 'test-30'
},
{
//x: 'Item 4',
y: 6,
id: 'test-40'
},
{
//x: 'Item 5',
y: 8,
id: 'test-50'
},
{
//x: 'Item 6',
y: 12,
id: 'test-60'
}];
var ctx = document.getElementById('lineChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
datasets: [{
label: 'Dataset 1',
data: data,
borderColor: "#3e95cd",
fill: false
}]
},
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function (tooltipItems, data) {
var multistringText = ['Value: ' + tooltipItems.yLabel];
multistringText.push('ID: ' + data['datasets'][tooltipItems.datasetIndex]['data'][tooltipItems.index].id);
return multistringText;
}
}
},
}
});
var ctx = document.getElementById('radarChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
datasets: [{
label: 'Dataset 1',
data: data,
borderColor: "#3e95cd",
fill: false
}]
},
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function (tooltipItems, data) {
var multistringText = ['Value: ' + tooltipItems.yLabel];
multistringText.push('ID: ' + data['datasets'][tooltipItems.datasetIndex]['data'][tooltipItems.index].id);
return multistringText;
}
}
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>
<div style="width: 400px; display: inline-block">
<canvas id="lineChart" width="100" height="70"></canvas>
</div>
<div style="width: 300px; display: inline-block">
<canvas id="radarChart" width="50" height="50"></canvas>
</div>

Try like this:
var data = [{
//x: 'Item 1',
y: 2,
id: 'test-10'
},
{
//x: 'Item 2',
y: 4,
id: 'test-20'
},
{
//x: 'Item 3',
y: 5,
id: 'test-30'
},
{
//x: 'Item 4',
y: 6,
id: 'test-40'
},
{
//x: 'Item 5',
y: 8,
id: 'test-50'
},
{
//x: 'Item 6',
y: 12,
id: 'test-60'
}];
var ctx = document.getElementById('lineChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
datasets: [{
label: 'Dataset 1',
data: data,
borderColor: "#3e95cd",
fill: false
}]
},
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function (tooltipItems, data) {
var multistringText = ['Value: ' + tooltipItems.yLabel];
multistringText.push('ID: ' + data['datasets'][tooltipItems.datasetIndex]['data'][tooltipItems.index].id);
return multistringText;
}
}
},
}
});
var ctx = document.getElementById('radarChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
datasets: [{
label: 'Dataset 1',
data: data.map(item => item.y),
borderColor: "#3e95cd",
fill: false
}]
},
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function (tooltipItems) {
return 'Value: ' + data[tooltipItems.index].y + ', ID: ' + data[tooltipItems.index].id;
}
}
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>
<div style="width: 400px; display: inline-block">
<canvas id="lineChart" width="100" height="70"></canvas>
</div>
<div style="width: 300px; display: inline-block">
<canvas id="radarChart" width="50" height="50"></canvas>
</div>
I think the key point is to be aware of how each chart type wants the data to be structured. In the above, a map() function is used to present the y values as an array for the radar chart. Then, to get the correct tooltip information, the tooltip index is used to retreive that element's values from the full data array. The label callback seems to return a string rather than an array.

Highcharts 6 time line chart

(Highcharts version 6)
Is it possible to have a time line looking chart in addition to data points like in this example:
https://jsfiddle.net/s1eL30Lh/97/
<script src="https://code.highcharts.com/stock/highstock.js"></script>
but without using highstock and instead only use highcharts ?
I know it's possible to use xrange module but it's not quite the same:
https://jsfiddle.net/deep3015/q18yvy75/
If the ranges are long enough to simulate a line then you lack the ability to add "data points" on top of the line, and if you make the ranges small enough to look like data points then you don't have a line.
NOTE
I'm aware of the new chart type 'timeline' in version 7 but I need to work with version 6.1

Yes, it is possible. However, you can't use flags series because it is only supported by Highstock. Check the demo and code posted below.
Code:
function toMs(yeah, month) {
return Date.UTC(yeah, month, 1);
}
var series = [{
// First series
name: 'Running',
color: 'green',
id: 'green',
dataRaw: [{
y: 1,
xRanges: [
// first value: from; second value: to
[toMs(2000, 1), toMs(2002, 8)],
[toMs(2006, 10), toMs(2006, 11)]
]
}]
}, {
// Second series
name: 'Filed',
color: 'yellow',
id: 'yellow',
dataRaw: [{
y: 1,
xRanges: [
// first value: from; second value: to
[toMs(2002, 8), toMs(2006, 10)]
]
}]
},
{
// Second series
name: 'Granted',
color: 'blue',
id: 'blue',
dataRaw: [{
y: 1,
xRanges: [
// first value: from; second value: to
[toMs(2006, 11), toMs(2021, 8)]
]
}]
}
].map(function(series) {
series.data = [];
series.dataRaw.forEach(function(dataRaw) {
dataRaw.xRanges.forEach(function(xRange) {
series.data.push([xRange[0], dataRaw.y], [xRange[1], dataRaw.y], [xRange[1], null]); // null breakes the line
}); // forEach
}); // forEach
return series;
});
console.log(series);
var chart = Highcharts.chart('container', {
chart: {
type: 'scatter'
},
title: {
text: 'Example'
},
plotOptions: {
scatter: {
lineWidth: 5,
marker: {
enabled: true,
symbol: 'circle',
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null,
radius: 5
},
dataLabels: {
enabled: true,
align: 'right',
rotation: -30,
x: -2,
y: 15,
formatter: function() {
return Highcharts.dateFormat('%Y-%m', this.x);
}
},
tooltip: {
pointFormatter: function() {
return Highcharts.dateFormat('%Y-%m', this.x);
}
}
},
flags: {
lineWidth: 1
}
},
xAxis: {
title: {
text: 'Time'
},
type: 'datetime',
minTickInterval: 365 * 24 * 36e5,
labels: {
align: 'left'
},
plotBands: [{
from: Date.UTC(2000, 10, 27),
to: Date.UTC(2004, 11, 1),
color: '#EFFFFF',
label: {
text: 'Office 1',
style: {
color: '#999999'
},
y: 30
}
}, {
from: Date.UTC(2004, 11, 1),
to: Date.UTC(2012, 9, 1),
color: '#FFFFEF',
label: {
text: 'Office 2',
style: {
color: '#999999'
},
y: 30
}
}, {
from: Date.UTC(2012, 9, 1),
to: Date.UTC(2020, 10, 27),
color: '#FFEFFF',
label: {
text: 'Office 3',
style: {
color: '#999999'
},
y: 30
}
}]
},
yAxis: {
tickInterval: 1
},
series: series,
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)'
},
labels: [{
distance: 10,
point: {
xAxis: 0,
yAxis: 0,
x: toMs(2002, 8),
y: 1
},
text: 'Filled Date'
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/6.1/highcharts.js"></script>
<script src="https://code.highcharts.com/6.1/modules/annotations.js"></script>
<div id="container" style="height: 400px"></div>
Demo:
https://jsfiddle.net/BlackLabel/6eahoxjv/

Applying 'categories' to Y-Axis causes a gap between column start and X Axis in Highcharts?

I am setting up a simple column chart using Highcharts. After applying categories to my Y-Axis it causes my columns to raise off the x-axis.
I initially was using a chart someone else started with, however couldn't fix it and even after altering a few different fields on my chart. Notably, min and max, however I also tried a few others I found in the docs regarding spacing etc.
So I took a chart from the Highcharts documentation and explictly edited it to my needs. Here is the starting chart I began with. I edited each field to slowly turn it into the graph I need.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Bar Title'
},
xAxis: {
categories: [
'Category 1',
'Category 2',
'Category 3',
'Category 4',
]
},
yAxis: {
title: '',
categories: ['', 'Cat 1', 'Cat 2', 'Cat 3', 'Cat 4', 'Cat 5'],
min: 0,
max: 5,
tickmarkPlacement: 'on'
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Score',
data: [1, 2, 3, 4]
}, {
name: 'Average Score',
data: [5, 4, 4, 4]
}]
});
This is as close as I can get. However, as noted by this image, there is a gap between my column and my x-axis.
If I remove the below line:
categories: ['', 'Cat 1', 'Cat 2', 'Cat 3', 'Cat 4', 'Cat 5'],
It gets a lot closer!
I'm just looking for a way to keep my Y-axis labels and have no gap. Any insight is appreciated.

You can't have categories on the xAxis and yAxis at the same time when you pass data with values. However, you can achieve what you expect using yAxsi.labels.formatter callback and mapping values to categories. Check demo and code posted below:
var categories = ['', 'Cat 1', 'Cat 2', 'Cat 3', 'Cat 4', 'Cat 5'];
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Bar Title'
},
xAxis: {
categories: [
'Category 1',
'Category 2',
'Category 3',
'Category 4',
]
},
yAxis: {
title: '',
min: 0,
max: 5,
labels: {
formatter: function() {
return categories[this.value];
}
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Score',
data: [1, 2, 3, 4]
}, {
name: 'Average Score',
data: [5, 4, 4, 4]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/Lq6c0mgx/
API reference:
https://api.highcharts.com/highcharts/yAxis.labels.formatter

Multiple points of one series in tooltip with Highcharts

I have created a Highcharts spline graph. When I try to hover over the 4th bullet it highlights the 3rd bullet. Also for the two bullets (1st and 2nd) with same x and y value only one tooltip is shown. I want to show two separate tooltips for the same bullets.
var categories = ['Negative', 'Somewhat Negative', 'Neutral', 'Somewhat Positive', 'Positive'];
var series = [{
name: 'Events',
data: [{
x: 28,
y: 2,
title: 'Point 1 X',
desc: 'Point 1 Y'
}, {
x: 28,
y: 2,
title: 'Point 2 X',
desc: 'Point 2 Y'
}, {
x: 34,
y: 2,
title: 'Point 3 X',
desc: 'Point 3 Y'
}, {
x: 34,
y: 3,
title: 'Point 4 X',
desc: 'Point 4 Y'
}, ]
}];
var age = 'Age';
var experience = 'Career';
Highcharts.chart('container',{
chart: {
type: 'spline',
spacingBottom: 15,
spacingTop: 10,
spacingLeft: 0,
spacingRight: 10
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
title: {
text: age
},
min: 15,
max: 70,
tickInterval: 5
},
yAxis: {
title: {
text: experience
},
labels: {
formatter: function() {
return categories[this.value];
}
},
max: 5,
min: 0
},
tooltip: {
formatter: function() {
return '<div style="width: 250px; white-space:normal;"><b>' + this.point.title + '</b><br/>' + this.point.desc + '</div>';
},
useHTML: true
},
legend: {
enabled: false
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: series,
});
The JS Fiddle is :
https://jsfiddle.net/Kartikeshwar/ues15xvu/

Highcharts - How to remove drilldown link on empty items?

I'm using Highcharts Stacked column and I need to remove drilldown link when some item is empty.
Preconditions:
Use value 0 or null when some item is empty because it's necessary to sort the chart columns.
Some columns may have drilldown and others not, depends on the data.
Please refer to the jsfiddle example:
http://jsfiddle.net/tsenffor/
How to reproduce:
Below the chart, uncheck the the "CCC" label.
Note that "Name 4 column" has no value, but the drilldown link is enabled. See the image below.
If possible hide the empty column, but I still need this value set 0 or null in the code because the columns sorting.
Find the related columns sorting issue here.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
type: 'category'
},
yAxis: {
min: 0,
title: {
text: 'Highchart test'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold'
}
}
},
legend: {
enabled: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'AAA',
data: [{
name: 'Name 1',
y: 5,
drilldown: 'Name1AAA'
}, {
name: 'Name 4',
y: 0
}, {
name: 'Name 3',
y: 2
}, {
name: 'Name 2',
y: 2
}]
}, {
name: 'BBB',
data: [{
name: 'Name 1',
y: 10,
drilldown: 'Name1BBB'
}, {
name: 'Name 4',
y: 0
}, {
name: 'Name 3',
y: 0
}, {
name: 'Name 2',
y: 5
}]
}, {
name: 'CCC',
data: [{
name: 'Name 1',
y: 4,
drilldown: 'Name1CCC'
}, {
name: 'Name 4',
y: 12,
drilldown: 'Name4CCC'
}, {
name: 'Name 3',
y: 8
}, {
name: 'Name 2',
y: 1
}]
}],
drilldown: {
series: [{
name: 'Name 1 - AAA',
id: 'Name1AAA',
data: [
['Name 1/1', 2],
['Name 1/2', 2],
['Name 1/3', 1],
]
}, {
name: 'Name 1 - BBB',
id: 'Name1BBB',
data: [
['Name 1/1', 7],
['Name 1/2', 2],
['Name 1/3', 1],
]
}, {
name: 'Name 1 - CCC',
id: 'Name1CCC',
data: [
['Name 1/1', 2],
['Name 1/2', 3],
['Name 1/3', 4],
]
}, {
name: 'Name 4 - CCC',
id: 'Name4CCC',
data: [
['Name 4/1', 4],
['Name 4/2', 5],
['Name 4/3', 3],
]
}]
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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="http://github.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Is there a way to do this?
Thanks!

We can use drilldown option to control the drilldown.
drilldown: {
//for axis label
activeAxisLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
},
//for datalabel
activeDataLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
}
}
Reference:http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/drilldown/labels/

To remove links of x-axis labels use this:
Highcharts.Tick.prototype.drillable = function () {};
Look this:
http://jsfiddle.net/tsenffor/3/