Related
I'm trying to implement a grouped bar chart with label for each bar chart. I don't want to have second label as a legend, basically i want 2 labels: one for group and one for element in dataset.
Something like:
Where do i need to put the second label(Male/Female), i put this label in datasets but it's not working.
Where do i need to put the second label(Male/Female), i put this label in datasets but it's not working.
You should declare and configure another x-axis. In the following example inspired by your data, I use options.scales.x.ticks.callback (see Labeling Axes | Chart.js) which allows me to inject new labels.
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Category 1', 'Category 2', 'Category 3', 'Category 4'],
datasets: [{
label: 'Dataset 1',
data: [3, 4, 4, 2],
stack: 'Stack 0'
}, {
label: 'Dataset 2',
data: [5, 3, 4, 7],
stack: 'Stack 0'
}, {
label: 'Dataset 3',
data: [3, 0, 4, 4],
stack: 'Stack 1'
}, {
label: 'Dataset 4',
data: [2, 5, 6, 2],
stack: 'Stack 1'
}]
},
options: {
scales: {
x: {
stacked: true,
ticks: {
font: {
weight: 'bold'
},
callback: () => 'Label 1 | Label 2'
}
},
x2: {
border: {
display: false
},
grid: {
display: false
}
},
y: {
stacked: true,
beginAtZero: true
}
},
plugins: {
legend: {
display: false
}
}
}
});
.chart-container {
position: relative;
width: 600px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#4.2.0"></script>
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
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
I have been working on charts, My requirement is when i click on column i want to display data in pie chart format. Initially its working good means i am getting static data in the column chart, But i want to display data in pie chart like circle. i will place code which is working good in column format. But i want it in pie format. Initially column should be in column format, When i click on any on the column data should be display in pie format.
Thanks in advance
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [{
name: 'Mammals',
y: 4,
drilldown: 'mammals'
},
['Reptiles', 2],
['Vertebrates', 1]
]
},
// trying to get data in pie chart after click on any of the column
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
id: 'mammals',
data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
{
id: 'mammals',
data: [{
name: 'cats',
y: 4,
drilldown: 'cats'
},
['one', 2],
['two', 1]
]
},
// third drill down
{
id: 'cats',
data: [['Cats1', 3], ['Dogs1', 2], ['Platypus1', 1]]
},{
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
},
},
// end
{
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
</script>
// working good in column format
<script>
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [{
name: 'Mammals',
y: 4,
drilldown: 'mammals'
},
['Reptiles', 2],
['Vertebrates', 1]
]
},
// second drill down
{
id: 'mammals',
data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
}, {
id: 'mammals',
data: [{
name: 'cats',
y: 4,
drilldown: 'cats'
},
['one', 2],
['two', 1]
]
},
// third drill down
{
id: 'cats',
data: [['Cats1', 3], ['Dogs1', 2], ['Platypus1', 1]]
},{
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
</script>
By default, mouse-over tracking in Highcharts tracks to the closest point on the x-axis. This works well for other types of charts, however, with my GANTT chart
[ http://jsfiddle.net/2xkfm87e/11/ ], this results in non-intuitive results for end users. In the sample image below, note that the cursor is closest to the first Category 8 segment. However, point 1 of the Category 4 segment is the closest point on the x-axis and this is the tooltip that is rendered. I need to have the tracking be focused on the y-axis instead so that if the cursor is closest to a point on the y-axis, that tooltip is rendered.
Is this possible?
Thanks for your help!
$(function () {
// Define tasks
var tasks = [{
name: 'Category 1',
intervals: []
}, {
name: 'Category 2',
intervals: [{ // From-To pairs
from: Date.UTC(2010,5, 21),
to: Date.UTC(2015, 5, 21),
label: 'Category 2',
tooltip_data: 'this data'
}]
}, {
name: 'Category 3',
intervals: [{ // From-To pairs
from: Date.UTC(2011,05,16),
to: Date.UTC(2012,03,21 ),
label: 'Category 3',
tooltip_data: 'this data'
}, {
from: Date.UTC(2013,07,09),
to: Date.UTC(2015,05,22),
label: 'Category 3',
tooltip_data: 'this data'
}]
}, {
name: 'Category 4',
intervals: [{ // From-To pairs
from: Date.UTC(2013,07,18 ),
to: Date.UTC(2015,05,22),
label: 'Category 4',
tooltip_data: 'this data'
}]
}, {
name: 'Category 5',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 5',
tooltip_data: 'this data'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 5',
tooltip_data: 'this data'
}]
}, {
name: 'Category 6',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 6',
tooltip_data: 'this data'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 6',
tooltip_data: 'this data'
}]
}, {
name: 'Category 7',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 7',
tooltip_data: 'this data'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 7',
tooltip_data: 'this data'
}]
}, {
name: 'Category 8',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 8',
tooltip_data: 'this data'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 8',
tooltip_data: 'this data'
}]
}, {
name: 'Category 9',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 9',
tooltip_data: 'this data'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 9',
tooltip_data: 'this data'
}]
}];
// re-structure the tasks into line seriesvar series = [];
var series = [];
$.each(tasks.reverse(), function(i, task) {
var item = {
name: task.name,
data: []
};
$.each(task.intervals, function(j, interval) {
item.data.push({
x: interval.from,
y: i,
label: interval.label,
from: interval.from,
to: interval.to,
tooltip_data: interval.tooltip_data
}, {
x: interval.to,
y: i,
from: interval.from,
to: interval.to,
tooltip_data: interval.tooltip_data
});
// add a null value between intervals
if (task.intervals[j + 1]) {
item.data.push(
[(interval.to + task.intervals[j + 1].from) / 2, null]
);
}
});
series.push(item);
});
// restructure the milestones
/*$.each(milestones, function(i, milestone) {
var item = Highcharts.extend(milestone, {
data: [[
milestone.time,
milestone.task
]],
type: 'scatter'
});
series.push(item);
});
*/
// create the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Category History'
},
xAxis: {
type: 'datetime'
},
yAxis: {
min:0,
max:8,
categories: ['Category 9',
'Category 8',
'Category 7',
'Category 6',
'Category 5',
'Category 4',
'Category 3',
'Category 2',
'Category 1'],
tickInterval: 1,
tickPixelInterval: 200,
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
}
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Criteria'
},
minPadding: 0.2,
maxPadding: 0.2,
fontSize:'15px'
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ tasks[this.y].name + '</b><br/>'+this.point.options.tooltip_data +'<br>' +
Highcharts.dateFormat('%m-%d-%Y', this.point.options.from) +
' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.to);
}
},
plotOptions: {
line: {
lineWidth: 10,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
});
console.log(series);
});
It should be already fixed on the master branch: http://jsfiddle.net/2xkfm87e/14/
And fix will be included in the next release. URL to the branch's CDN:
<script src="http://github.highcharts.com/highstock.js"></script>
Ok, I got it working. Here are the results for anyone who might follow this path. http://jsfiddle.net/rwsavoy/2xkfm87e/16/ I am still giving credit to #Paweł Fus for this answer because he sent me in the right direction. Thanks Paweł!
Also, this functionality is available as of Highcharts 4.1.5. However, as of this writing, the latest version of Highstocks (2.1.5) does not (From the documentation, Highstocks includes most of Highcharts functionality).
$(function () {
/**
* Highcharts X-range series plugin
*/
(function (H) {
var defaultPlotOptions = H.getOptions().plotOptions,
columnType = H.seriesTypes.column,
each = H.each;
defaultPlotOptions.xrange = H.merge(defaultPlotOptions.column, {});
H.seriesTypes.xrange = H.extendClass(columnType, {
type: 'xrange',
parallelArrays: ['x', 'x2', 'y'],
animate: H.seriesTypes.line.prototype.animate,
/**
* Borrow the column series metrics, but with swapped axes. This gives free access
* to features like groupPadding, grouping, pointWidth etc.
*/
getColumnMetrics: function () {
var metrics,
chart = this.chart,
swapAxes = function () {
each(chart.series, function (s) {
var xAxis = s.xAxis;
s.xAxis = s.yAxis;
s.yAxis = xAxis;
});
};
swapAxes();
this.yAxis.closestPointRange = 1;
metrics = columnType.prototype.getColumnMetrics.call(this);
swapAxes();
return metrics;
},
translate: function () {
columnType.prototype.translate.apply(this, arguments);
var series = this,
xAxis = series.xAxis,
yAxis = series.yAxis,
metrics = series.columnMetrics;
H.each(series.points, function (point) {
barWidth = xAxis.translate(H.pick(point.x2, point.x + (point.len || 0))) - point.plotX;
point.shapeArgs = {
x: point.plotX,
y: point.plotY + metrics.offset,
width: barWidth,
height: metrics.width
};
point.tooltipPos[0] += barWidth / 2;
point.tooltipPos[1] -= metrics.width / 2;
});
}
});
/**
* Max x2 should be considered in xAxis extremes
*/
H.wrap(H.Axis.prototype, 'getSeriesExtremes', function (proceed) {
var axis = this,
dataMax = Number.MIN_VALUE;
proceed.call(this);
if (this.isXAxis) {
each(this.series, function (series) {
each(series.x2Data || [], function (val) {
if (val > dataMax) {
dataMax = val;
}
});
});
if (dataMax > Number.MIN_VALUE) {
axis.dataMax = dataMax;
}
}
});
}(Highcharts));
var series= [{
data: [ {
name: 'Catergory 1',
x: Date.UTC(2009,3,15),
x2: Date.UTC(2015,5,11),
y:8,
tooltip_data:'',
color:'#f45b5b'
} , {
name: 'Catergory 2',
x: Date.UTC(2013,10,12),
x2: Date.UTC(2014,6,17),
y:7,
tooltip_data:'Catergory 2 A',
color:'#2b908f'
} , {
name: 'Catergory 2',
x: Date.UTC(2014,6,18),
x2: Date.UTC(2015,5,11),
y:7,
tooltip_data:'',
color:'#2b908f'
} , {
name: 'Catergory 3',
x: Date.UTC(2009,6,21),
x2: Date.UTC(2015,5,11),
y:6,
tooltip_data:'',
color:'#e4d354'
} , {
name: 'Catergory 4',
x: Date.UTC(2011,8,29),
x2: Date.UTC(2015,5,11),
y:5,
tooltip_data:'',
color:'#f15c80'
} , {
name: 'Catergory 7',
x: Date.UTC(2009,3,15),
x2: Date.UTC(2014,6,17),
y:2,
tooltip_data:'Tooltip Catergory 7 A',
color:'#90ed7d'
} , {
name: 'Catergory 7',
x: Date.UTC(2014,6,18),
x2: Date.UTC(2015,5,11),
y:2,
tooltip_data:'',
color:'#90ed7d'
} , {
name: 'Catergory 8',
x: Date.UTC(2009,6,16),
x2: Date.UTC(2015,5,11),
y:1,
tooltip_data:'',
color:'#434348'
} , {
name: 'Category 9',
x: Date.UTC(2009,3,15),
x2: Date.UTC(2015,5,11),
y:0,
tooltip_data:'',
color:'#7cb5ec'
}] }];
// THE CHART
$('#container').highcharts({
chart: {
type: 'xrange'
},
title: {
text: 'Category History',
style: {
color: '#525151',
font: '20px Helvetica',
fontWeight: 'bold'
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats:{
month: '%b - %Y'
},
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
}
},
startOnTick: true,
tickmarkPlacement: 'on',
tickInterval: 3 * 30 * 24 * 3600 * 1000,
endOnTick: true,
minPadding: 0,
maxPadding: 0,
gridLineWidth: 1
},
yAxis: {
min:0,
useHTML: true,
categories: ['Category 9',
'Category 8',
'Category 7',
'Category 6',
'Category 5',
'Category 4',
'Category 3',
'Category 2',
'Category 1'],
tickInterval: 1,
tickPixelInterval: 200,
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
}
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Criteria',
style: {
color: '#525151',
font: '15px Helvetica',
fontWeight: 'bold'
}
},
minPadding: 0.2,
maxPadding: 0.2
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.options.name + '</b><br/>' + this.point.options.tooltip_data + '<br>' +
Highcharts.dateFormat('%m-%d-%Y', this.point.options.x) +
' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.x2 )+ '<br>';
}
},
plotOptions: {
series: {
borderRadius: 5,
pointWidth: 10,
colorByPoint: true
}
},
series: series
});
});
Hi I am currently developing a column high chart with a 3 level drill down however I am having bother naming the legend, I would like to have the legend displaying the data name however it is only displaying the series name at the moment.
Also I was having bother with the legend changing to the appropriately as it goes down through the different levels.
http://jsfiddle.net/amccormack10/tdy2x4dp/1/
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Number of Students Enrolled & Withdrawn'
},
subtitle: {
text: 'Click the Columns to see Totals for each Level'
},
xAxis: {
type: 'category',
title: {
text: 'Students'
}
},
yAxis: {
title: {
text: 'Total Number of Students'
}
},
legend: {
enabled: true
//backgroundColor: '#FFFFFF',
//layout: 'vertical',
//floating: true,
//align: 'left',
//verticalAlign: 'top',
//x: 90,
//y: 60,
//shadow: true
},
series: [{
name: 'Overall Total of Students',
colorByPoint: true,
data: [{
name: 'Enrolled',
y: 44,
drilldown: 'LevelEnrolled'
}, {
name: 'Withdrawn',
y: 55,
drilldown: 'LevelWithdrawn'
}]
}],
drilldown: {
series: [{
name: 'Enrolled by Level',
colorByPoint: true,
id: 'LevelEnrolled',
data: [{
name: 'Level 1',
y: 23,
drilldown: 'Level1Enrolled'
}, {
name: 'Level 2',
y: 24,
drilldown: 'Level2Enrolled'
}, {
name: 'Level 3',
y: 11,
drilldown: 'Level3Enrolled'
}]
}, {
name: 'Withdrawn by Level',
colorByPoint: true,
id: 'LevelWithdrawn',
data: [{
name: 'Level 1',
y: 12,
drilldown: 'Level1Withdrawn'
}, {
name: 'Level 2',
y: 33,
drilldown: 'Level2Withdrawn'
}, {
name: 'Level 3',
y: 33,
drilldown: 'Level3Withdrawn'
}]
}, {
id: 'Level1Enrolled',
colorByPoint: true,
data: [
['CIT', 22],
['CS', 11],
['GD', 33],
['SD', 12],
['BIT', 34]
]
}, {
id: 'Level2Enrolled',
colorByPoint: true,
data: [
['CIT', 43],
['CS', 22],
['GD', 33],
['SD', 22],
['BIT', 22]
]
}, {
id: 'Level3Enrolled',
colorByPoint: true,
data: [
['CIT', 22],
['CS', 22],
['GD', 12],
['SD', 11],
['BIT', 23]
]
}, {
id: 'Level1Withdrawn',
colorByPoint: true,
data: [
['CIT', 23],
['CS', 11],
['GD', 2],
['SD', 1]
]
}, {
id: 'Level2Withdrawn',
colorByPoint: true,
data: [
['CIT', 3],
['CS', 2],
['GD', 4],
['SD', 7]
]
}, {
id: 'Level3Withdrawn',
colorByPoint: true,
data: [
['CIT', 3],
['CS', 4],
['GD', 5],
['SD', 8]
]
}]
}
});
});
Any help would be greatly appreciated.
Thanks