Develop Reference

How to show bar labels in legend in Chart.js 2.1.6?

I'm creating charts using Chart.js and I want to show the labels for the bars in the legend, not the title of the dataset (there is only one), please see the below image as an example:
My current legend just looks like this:
I have looked through the docs but to no avail, I found them very confusing actually.
Here is my current code:
var chart_0 = new Chart($('#cp_chart_0'), {
type: 'bar'
, data: {
labels: ['Blue','Green','Yellow','Red','Purple','Orange']
, datasets: [{
label: 'Dataset 1'
, borderWidth: 0
, backgroundColor: ['#2C79C5','#7FA830','#7B57C3','#ED4D40','#EC802F','#1DC6D3']
, data: ['12','2','5','0','9','1']
}]
}
});
Thanks!

In one of the most recent releases of Chart.js 2.1.x, they added back this functionality. So go get the latest release first. Then insert the code below.
It is located under the options and legend. Here is how you use it:
options: {
legend: {
position: 'right'
}
}

Easiest way is to provide your data with multiple sets :
data: {
labels: ['total votes']
, datasets: [{
label: 'Blue'
, backgroundColor: ['#2C79C5']
, data: ['12']
},{
label: 'Green'
, backgroundColor: ['#7FA830']
, data: ['2']
},
...
]
}
But you can generate a custom labels using generateLabels - http://www.chartjs.org/docs/#chart-configuration-legend-configuration
Or even customise the whole legend, including formatting, with legendCallback - http://www.chartjs.org/docs/#chart-configuration-common-chart-configuration

This solution uses Chart.js version 3. You can pre-process your data using the Plugin Core API. The API offers different hooks that may be used for executing custom code.
I use the beforeInit hook to create individual datasets for each defined label/value pair. Note that the data of these new datasets are defined in point format (for instance [{ x: 1, y: 12 }]):
beforeInit: chart => {
let dataset = chart.config.data.datasets[0];
chart.config.data.datasets = chart.config.data.labels.map((l, i) => ({
label: l,
data: [{ x: i + 1, y: dataset.data[i] }],
backgroundColor: dataset.backgroundColor[i],
categoryPercentage: 1
}));
chart.config.data.labels = undefined;
}
Further you need to define a second x-axis that will contain the labels.
x1: {
offset: true,
gridLines: {
display: false
}
}
The labels on x1 need to be collected and defined programmatically each time the hidden state of a dataset changes. This can be done in the beforeLayout hook.
beforeLayout: chart => chart.options.scales.x1.labels = chart.config.data.datasets.filter((ds, i) => !chart.getDatasetMeta(i).hidden).map(ds => ds.label)
Please take a look at below runnable code and see how it works.
new Chart('chart', {
type: 'bar',
plugins: [{
beforeInit: chart => {
let dataset = chart.config.data.datasets[0];
chart.config.data.datasets = chart.config.data.labels.map((l, i) => ({
label: l,
data: [{ x: i + 1, y: dataset.data[i] }],
backgroundColor: dataset.backgroundColor[i],
categoryPercentage: 1
}));
chart.config.data.labels = undefined;
},
beforeLayout: chart => chart.options.scales.x1.labels = chart.config.data.datasets.filter((ds, i) => !chart.getDatasetMeta(i).hidden).map(ds => ds.label)
}],
data: {
labels: ['Blue', 'Green', 'Yellow', 'Red', 'Purple', 'Orange'],
datasets: [{
data: ['12', '2', '5', '0', '9', '1'],
backgroundColor: ['#2C79C5', '#7FA830', '#FFF200', '#ED4D40', '#800080', '#EC802F']
}]
},
options: {
interaction: {
intersect: true,
mode: 'nearest'
},
plugins: {
legend: {
position: 'right'
},
tooltip: {
callbacks: {
title: () => undefined
}
}
},
scales: {
y: {
beginAtZero: true
},
x: {
display: false
},
x1: {
offset: true,
gridLines: {
display: false
}
}
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
<canvas id="chart" height="120"></canvas>

Extending Highmaps Side Effect

I am trying to create a dot density map of the state of Florida. While I know that Highmaps doesn't support color axis with mappoints. I extended it and it works but it comes with a side affect. When I click on one of the categories in the legend no hiding occurs. For example if I click on '>10', all values greater than 10 don't hide. When I open up the Chrome debugger it states that: a.setVisible is not a function What can I do to solve this problem. This is a requirement, while it may seem minor. I would appreciate any sort of tips or maybe some sort of example would be perfect. I can't show more code than what is shown. If you need me to explain more about the problem I will be glad to do so.
(function (H) {
H.seriesTypes.mappoint.prototype.axisTypes = [ 'xAxis', 'yAxis', 'colorAxis'];
H.wrap(H.seriesTypes.mappoint.prototype, "translate", function (p) {
p.call(this);
H.seriesTypes.mappoint.prototype.translateColors.call(this);
});
H.seriesTypes.mappoint.prototype.translateColors = H.seriesTypes.heatmap.prototype.translateColors;
H.seriesTypes.mappoint.prototype.colorKey = 'value';
})(Highcharts);
// Initiate the chart
$('#container').highcharts('Map', {
title: {
text: title
},
mapNavigation: {
enabled: false,
},
colorAxis: {
dataClasses: [{
from: 0,
to: 3,
color: "#66FFFF"
}, {
from: 4,
to: 9,
color: "#0099FF"
}, {
from: 10,
color: "#0000FF"
}
]
},
tooltip:
{
enabled: true
}
,
series: [{
mapData: Highcharts.maps['countries/us/us-fl-all'],
name: 'Basemap',
borderColor: '#A0A0A0',
nullColor: 'rgba(200, 200, 200, 0.3)',
showInLegend: false,
},
{
// Specify points using lat/lon
type: 'mappoint',
name: 'A',
turboThreshold: 2000000,
data: p_data,
dataLabels: {
enabled: false
}
},
{
// Specify points using lat/lon
type: 'mappoint',
name: 'B',
turboThreshold: 2000000,
data: m_data,
dataLabels: {
enabled: false
}
},
{
// Specify points using lat/lon
type: 'mappoint',
name: 'C',
turboThreshold: 2000000,
data: h_data,
dataLabels: {
enabled: false
}
}
]});
A sample to play with: http://jsfiddle.net/dlope073/4mabw6zr/2/

Use setVisible method from default map series. Like this: http://jsfiddle.net/4mabw6zr/3
(function (H) {
H.seriesTypes.mappoint.prototype.axisTypes = ['xAxis', 'yAxis', 'colorAxis'];
H.seriesTypes.mappoint.prototype.pointClass.prototype.setVisible = H.seriesTypes.map.prototype.pointClass.prototype.setVisible; // use the same setVisible method as map type.
H.wrap(H.seriesTypes.mappoint.prototype, "translate", function (p) {
p.call(this);
H.seriesTypes.mappoint.prototype.translateColors.call(this);
});
H.seriesTypes.mappoint.prototype.translateColors = H.seriesTypes.heatmap.prototype.translateColors;
H.seriesTypes.mappoint.prototype.colorKey = 'value';
})(Highcharts);

Displaying array values in Bar chart of HighCharts

I am trying to display values which I am getting dynamically. In the below code I am trying to store the values in array and I am trying to use the array values in "series: data".
Nothing is getting displayed in the graph.
I know this is very simple question but I did not get any satisfactory answer when I googled it. Please help
var x = window.location.search.replace( "?", "" );
x = x.substring(3);
var array = x.split(","); // I am storing my dynamic values in this array
$(function () {
//alert(array); ----- I am able to see the values here
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Wireless Experience Meter'
},
subtitle: {
text: 'Sub - Time to Download'
},
xAxis: {
categories: ['Text'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Time (ms)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' ms'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Attempt 1',
//data: [635, 203, 200]
data : [array[0]] // I need to pass the variables here to get it displayed
}, {
name: 'Attempt 2',
//data: [133, 408, 698]
data : [array[1]]
}, {
name: 'Attempt 3',
//data: [973, 914, 4054]
data : [array[2]]
}]
});
});

You don't tell us what the variable array equals but since its generated from x.split(","), it's elements are going to be strings and not the numeric values Highcharts needs.
So convert it with parseInt or parseFloat:
var numericData = [];
for (var i = 0; i < array.length; i++){
numericData.push(parseFloat(array[i]));
}
...
series: [{
name: 'Attempt 1',
data : numericData
},
...

[array[0]] is not an array, that looks like console output not javascript. But [[0]] or [0] technically would be. However, since a call to array (array(0)) generates an array then I think you want data: array(0).
Outside shot at data : [array(0)] if you didn't show the example data correctly. I've never used HighCharts so I don't know what it's expected but I still go with data : array(0)

Flot Area Chart

Is it possible to make an area chart in flot? I've noticed that there is a "stack" plugin. The image below is the effect I want to create. There is only one problem, the stack plugin automatically adds the component data. I don't want that. I only want the fill in effect.
I tried the fill between property, but that makes an annoying color blending (see below):
In the stack example, the colors don't blend at all. That's the visual effect I'm going for.
UPDATE
The code I used to make it work was:
var dataSet = [
{id: "A", label: "Demand (kW)", color: "#2980B9", data: d, lines: { show: true, lineWidth: 1, fill: .5}},
{id: "B", label: "Demand (kW)", color: "#D35400", data: d2, lines: { show: true, lineWidth: 1, fill: .5 }, fillBetween: "A"},
{id: "C", label: "Demand (kW)", color: "#C0392B", data: d3, lines: { show: true, lineWidth: 1, fill: .5 }, fillBetween: "B"}
]

Yes, you can set the fill color for a line chart to produce an area chart.
Setting the fill color below for a line chart:
var placeholder = $("#placeholder");
var data = [];
var options = {
series: {
lines: { show: true, fill: true, fillColor: "rgba(86, 137, 191, 0.8)" },
points: { show: true, fill: false }
}
};
$.plot(placeholder, data, options);
EDIT:
After looking at the result, here's how I got it to work. You need to include the Stack and FillBetween plugins (I had to do it in that order):
var placeholder = $("#placeholder");
var data = [
{data: data1, id: "Data1ID"},
{data: data2, id: "Data2ID", fillBetween: "Data1ID"},
{data: data3, id: "Data3ID", fillBetween: "Data2ID"}
]
var options = {
series: {
lines: { show: true, fill: true },
points: { show: true, fill: false }
}
};
$.plot(placeholder, data, options);

Highcharts How to create a Grouped, stacked bar chart from csv file using javascript and the Highcharts API

I am a javascript newb and can't quite wrap my head around how to create a grouped, stacked bar chart from a csv file using Highcharts API and javascript. I've asked this same question at the support forum at highcharts but haven't gotten any takers yet. I've always had great luck here in finding answers. I've created the chart that i want here:
http://maine.gov/mdot/about/assets/hwy/charttest-hbar2.html.
Here is the code for this chart with the series being created from within the highcharts api:
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar'
},
title: {
text: 'Customer Service Levels'
},
xAxis: {
title:{
text: 'Highway Corridor Priority'
},
categories: ['1', '2', '3'],
labels: {
formatter: function() {
return '<span style="font-weight:bold;color:#ed1c24;">'+this.value+'</span> Safety<br/><br/> Condition<br/><br/> Service';
},
}
},
yAxis: {
min: 0,
title: {
text: 'Percent of Miles'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +' mi';
}
},
plotOptions: {
series: {
stacking: 'percent'
}
},
series: [
// for priority 1 corridor
{
name: 'D',
data: [304.69, 277.92, 139.94], // safety, condition, service
color: '#ff647f',
stack: 1
}, {
name: 'C',
data: [482.5, 499.04, 104.54], // safety, condition, service
color: '#0095c5',
stack: 1
}, {
name: 'B',
data: [720.13, 678.64, 299.5], // safety, condition, service
color: '#ffd600',
stack: 1
}, {
name: 'A',
data: [379.02, 415.35, 1475.39], // safety, condition, service
color: '#3cb878',
stack: 1
},
// for priority 2 corridor
{
name: 'D',
data: [157.56,99.88,16.34], // safety, condition, service
color: '#ff647f',
stack: 2,
showInLegend: false
}, {
name: 'C',
data: [374.97,347.18,36.39], // safety, condition, service
color: '#0095c5',
stack: 2,
showInLegend: false
}, {
name: 'B',
data: [167.21,358.19,210.67], // safety, condition, service
color: '#ffd600',
stack: 2,
showInLegend: false
}, {
name: 'A',
color: '#3cb878',
data: [187.75, 89.15, 680.06], // safety, condition, service
stack: 2,
showInLegend: false
},
// for priority 3 corridor
{
name: 'D',
data: [188.79,186.91,36.78], // safety, condition, service
color: '#ff647f',
showInLegend: false,
stack: 3
}, {
name: 'C',
data: [507.07,337,209.16], // safety, condition, service
color: '#0095c5',
showInLegend: false,
stack: 3
}, {
name: 'B',
data: [684.08,582.52,545.03], // safety, condition, service
color: '#ffd600',
stack: 3,
showInLegend: false
}, {
name: 'A',
color: '#3cb878',
data: [60.54, 299.94, 683.42], // safety, condition, service
stack: 3,
showInLegend: false
}]
});
});
Following is the csv:
CORRIDOR_PRIORITY|CSL_TYPE|SCORE|CSL_LENGTH
1|Safety|A|391
1|Safety|B|679
1|Safety|C|365
1|Safety|D|202
1|Safety|F|97
1|Service|A|1028
1|Service|B|513
1|Service|C|166
1|Service|D|17
1|Service|F|9
1|Condition|A|357
1|Condition|B|536
1|Condition|C|490
1|Condition|D|133
1|Condition|F|105
2|Safety|A|279
2|Safety|B|286
2|Safety|C|173
2|Safety|D|94
2|Safety|F|128
2|Service|A|799
2|Service|B|101
2|Service|C|33
2|Service|D|4
2|Service|F|22
2|Condition|A|189
2|Condition|B|307
2|Condition|C|241
2|Condition|D|130
2|Condition|F|88
3|Safety|A|488
3|Safety|B|517
3|Safety|C|424
3|Safety|D|226
3|Safety|F|321
3|Service|A|1535
3|Service|B|208
3|Service|C|57
3|Service|D|166
3|Service|F|10
3|Condition|A|380
3|Condition|B|654
3|Condition|C|458
3|Condition|D|275
3|Condition|F|197
4|Safety|A|333
4|Safety|B|507
4|Safety|C|433
4|Safety|D|347
4|Safety|F|344
4|Service|A|1114
4|Service|B|83
4|Service|C|762
4|Service|D|3
4|Service|F|3
4|Condition|A|896
4|Condition|B|525
4|Condition|C|308
4|Condition|D|153
4|Condition|F|71
5|Safety|A|338
5|Safety|B|584
5|Safety|C|697
5|Safety|D|367
5|Safety|F|431
5|Service|A|898
5|Service|B|78
5|Service|C|1434
5|Service|D|5
5|Service|F|3
5|Condition|A|747
5|Condition|B|787
5|Condition|C|509
5|Condition|D|253
5|Condition|F|103
The first number would be the stack number. The last number is the mileage. We may be able to format the csv differently also if that makes a difference - it's coming from BIQuery. Perhaps stack#|grade|safety#|condition#|service#.
Due to the multidimensional data, I'm completely confused as to how to pass the data to the chart API.