Related
I'm creating a bubble chart using chartjs. I am able to create tooltips that describe each of the bubbles, but users of my chart may not be able to hover over it to see the tooltip. The BubbleData object format doesn't include a label element (I put one in anyway - no luck), I've tried the "labels" element for the Chart Data object (even though the docs say this is for Category labels - you never know!), and everything I can think of to put label on the bubble.
Is there a tooltip configuration that makes all the tooltips visible at all times? This would work for me as well.
Thanks;
Glenn
I was looking for the same thing and figured out how to do it.
add in the datasets the title:"dataTitle3" you want to show.
use the data labeling plugin.
simple code manipulation achieves what you want using
dataset.title
I have made a sample but I think you could find out how and represent the data you want if you play with: external link
new Chart(document.getElementById("bubble-chart"), {
type: 'bubble',
data: {
labels: "Africa",
datasets: [{
label: ["China"],
backgroundColor: "rgba(255,221,50,0.2)",
borderColor: "rgba(255,221,50,1)",
title: "dataTitle1", //adding the title you want to show
data: [{
x: 21269017,
y: 5.245,
r: 15
}]
}, {
label: ["Denmark"],
backgroundColor: "rgba(60,186,159,0.2)",
borderColor: "rgba(60,186,159,1)",
title: "dataTitle2",
data: [{
x: 258702,
y: 7.526,
r: 10
}]
}, {
label: ["Germany"],
backgroundColor: "rgba(0,0,0,0.2)",
borderColor: "#000",
title: "dataTitle3", //adding the title you want to show
data: [{
x: 3979083,
y: 6.994,
r: 15
}]
}, {
label: ["Japan"],
backgroundColor: "rgba(193,46,12,0.2)",
borderColor: "rgba(193,46,12,1)",
title: "dataTitle4", //adding the title you want to show
data: [{
x: 4931877,
y: 5.921,
r: 15
}]
}]
},
options: {
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: "Happiness"
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: "GDP (PPP)"
}
}]
}
}
});
Chart.plugins.register({
afterDatasetsDraw: function(chart, easing) {
var ctx = chart.ctx;
chart.data.datasets.forEach(function(dataset, i) {
var meta = chart.getDatasetMeta(i);
if (meta.type == "bubble") { //exclude scatter
meta.data.forEach(function(element, index) {
// Draw the text in black, with the specified font
ctx.fillStyle = 'rgb(0, 0, 0)';
var fontSize = 13;
var fontStyle = 'normal';
var fontFamily = 'Helvetica Neue';
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
// Just naively convert to string for now
var dataString = dataset.data[index].toString();
// Make sure alignment settings are correct
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var padding = 15;
var position = element.tooltipPosition();
ctx.fillText(dataset.title, position.x, position.y - (fontSize / 2) - padding);
});
} //if
});
}
});
<canvas id="bubble-chart" width="800" height="800"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
ChartJs has a plugin now for this.
https://github.com/chartjs/chartjs-plugin-datalabels
Just install it using nuget or bower and add the reference of it. It wil automatically set z as label
The sytax has changed with chart.js V3 in a few places so I thought I'd share my variation on the chosen answer.
Chart.register({
id: 'permanentLabel',
afterDatasetsDraw: function (chart, args, options) {
var ctx = chart.ctx
chart.data.datasets.forEach(function (dataset, i) {
var meta = chart.getDatasetMeta(i)
if (meta.type == 'bubble') {
meta.data.forEach(function (element, index) {
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
var position = element.tooltipPosition()
ctx.fillText(dataset.data[index].label.toString(), position.x, position.y - dataset.data[index].r - Chart.defaults.font.size)
})
}
})
},
})
I have an some extra code, to avoid overlapping of labels.
var labelPlugin = {
myTimeout: null,
getNewYPostion:function(item, alreadyUsed, fontSize){
for(let i of alreadyUsed){
if((item.y_from >= i.y_from && item.y_from <= i.y_to) || (item.y_to>= i.y_from && item.y_to <= i.y_to)){
if((item.x_from >= i.x_from && item.x_from <= i.x_to) || (item.x_to>= i.x_from && item.x_to <= i.x_to)){
item.y_from=i.y_to+(fontSize*0.1);
item.y_to=item.y_from+fontSize;
return this.getNewYPostion(item, alreadyUsed, fontSize);
}
}
}
return item;
},
afterDatasetsDraw: function (chart, args, options) {
var ctx = chart.ctx;
var that=this;
clearTimeout(this.myTimeout);
this.myTimeout = setTimeout(function () {
var alreadyUsed = [];
chart.data.datasets.forEach(function (dataset, i) {
var txt = dataset.label;
var txtSize = ctx.measureText(txt).width;
var meta = chart.getDatasetMeta(i);
if (meta.type === "bubble") { //exclude scatter
var fontSize = 10;
var fontStyle = 'normal';
var fontFamily = 'Helvetica Neue';
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
var padding, position, x_from, x_to, y, y_from, y_to;
meta.data.forEach(function (element, index) {
padding = element.options.radius;
position = element.tooltipPosition();
x_from = position.x + padding + 5; // left
x_to = x_from + txtSize; // left
y = position.y; // top
y_from = y - (fontSize * 0.5);
y_to = y + (fontSize * 0.5);
var item={
'y_from': y_from,
'y_to': y_to,
'x_from': x_from,
'x_to': x_to,
};
item=that.getNewYPostion(item, alreadyUsed, fontSize);
alreadyUsed.push(item);
ctx.fillText(txt, item.x_from, item.y_from+(0.5*fontSize));
});
}
});
}, 500);
}
};
In 2022 the current version is 3.9.1 here is a working snippet:
const $canvas = document.getElementById('chart')
const popData = {
datasets: [{
label: ['Deer Population'],
data: [{
x: 100,
y: 0,
r: 25,
label: 'Russia',
}, {
x: 60,
y: 30,
r: 20,
label: 'China',
}, {
x: 40,
y: 60,
r: 25,
label: 'Canada',
}, {
x: 80,
y: 80,
r: 40,
label: 'US',
}, {
x: 20,
y: 30,
r: 25,
label: 'Africa',
}, {
x: 0,
y: 100,
r: 5,
label: 'Europe',
}],
backgroundColor: "#FF9966"
}]
};
const bubbleChart = new Chart($canvas, {
type: 'bubble',
data: popData
});
const fontSize = Chart.defaults.font.size
Chart.register({
id: 'permanentLabel',
afterDatasetsDraw: (chart, args, options) => {
const ctx = chart.ctx
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
chart.data.datasets.forEach((dataset, i) => {
const meta = chart.getDatasetMeta(i)
if (meta.type !== 'bubble') return
meta.data.forEach((element, index) => {
const item = dataset.data[index]
const position = element.tooltipPosition()
ctx.fillText(item.label.toString(), position.x, position.y - item.r - fontSize)
})
})
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="chart" width="600" height="180"></canvas>
I wanna show tooltips over the line not only on data points.
I also tried the chartjs-plugin-crosshair but it doesn't work in V3 of chartjs.
You can write a custom implementation for V3 for it:
// Options for the indicators
const indicatorOptions = {
radius: 4,
borderWidth: 1,
borderColor: 'red',
backgroundColor: 'transparent'
};
// Override getLabelAndValue to return the interpolated value
const getLabelAndValue = Chart.controllers.line.prototype.getLabelAndValue;
Chart.controllers.line.prototype.getLabelAndValue = function(index) {
if (index === -1) {
const meta = this.getMeta();
const pt = meta._pt;
const vScale = meta.vScale;
return {
label: 'interpolated',
value: vScale.getValueForPixel(pt.y)
};
}
return getLabelAndValue.call(this, index);
}
// The interaction mode
Chart.Interaction.modes.interpolate = function(chart, e, option) {
const x = e.x;
const items = [];
const metas = chart.getSortedVisibleDatasetMetas();
for (let i = 0; i < metas.length; i++) {
const meta = metas[i];
const pt = meta.dataset.interpolate({
x
}, "x");
if (pt) {
const element = new Chart.elements.PointElement({ ...pt,
options: { ...indicatorOptions
}
});
meta._pt = element;
items.push({
element,
index: -1,
datasetIndex: meta.index
});
} else {
meta._pt = null;
}
}
return items;
};
// Plugin to draw the indicators
Chart.register({
id: 'indicators',
afterDraw(chart) {
const metas = chart.getSortedVisibleDatasetMetas();
for (let i = 0; i < metas.length; i++) {
const meta = metas[i];
if (meta._pt) {
meta._pt.draw(chart.ctx);
}
}
},
afterEvent(chart, args) {
if (args.event.type === 'mouseout') {
const metas = chart.getSortedVisibleDatasetMetas();
for (let i = 0; i < metas.length; i++) {
metas[i]._pt = null;
}
args.changed = true;
}
}
})
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx, {
type: "line",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
fill: true,
label: "My First dataset",
backgroundColor: "rgba(132, 0, 0, 1)",
borderColor: "rgb(255, 99, 132)",
data: [0, 10, 5, 2, 20, 30, 45]
},
{
data: [30, 40, 50],
label: 'My Second Dataset',
fill: true,
backgroundColor: "lightgreen",
borderColor: "green"
}
]
},
options: {
interaction: {
mode: "interpolate",
intersect: false,
axis: "x"
},
plugins: {
tooltip: {
displayColors: false,
}
}
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
<h1>Interpolating line values</h1>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
The following combination of chartjs-plugin-crosshair and chart.js seems to be working fine for me.
"chart.js": "^3.4.0",
"chartjs-plugin-crosshair": "^1.2.0"
I am initiating the Chart object like below:
Chart.register(CrosshairPlugin);
Which can be used properly in an useEffect block:
useEffect(() =>
Chart.register(CrosshairPlugin);
return () => {
Chart.unregister(CrosshairPlugin);
};
}, []);
And then you can pass the options of the chart like below:
{
...,
options: {
plugins: {
crosshair: {
line: {
color: "#d1d1d1",
width: 1,
},
sync: {
enabled: true,
group: 1,
suppressTooltips: false,
},
zoom: {
enabled: false,
},
}
}
}
}
Note that the configurations above, will keep the crosshair pointer synced over all your charts rendered on the same component. You may need to change the behavior here.
you can use chartjs-plugin-crosshair
function generateDataset(shift, label, color) {
var data = [];
var x = 0;
while (x < 30) {
data.push({
x: x,
y: Math.sin(shift + x / 3)
});
x += Math.random();
}
var dataset = {
backgroundColor: color,
borderColor: color,
showLine: true,
fill: false,
pointRadius: 2,
label: label,
data: data,
lineTension: 0,
interpolate: true
};
return dataset;
}
var chart1 = new Chart(document.getElementById("chart").getContext("2d"), {
type: "scatter",
options: {
plugins: {
crosshair: {
sync: {
enabled: false
},
},
tooltip: {
animation: false,
mode: "interpolate",
intersect: false,
callbacks: {
title: function(a, d) {
return a[0].element.x.toFixed(2);
},
label: function(d) {
return (
d.chart.data.datasets[d.datasetIndex].label + ": " + d.element.y.toFixed(2)
);
}
}
}
},
scales: {
x: {
min: 2,
max: 28
}
}
},
data: {
datasets: [
generateDataset(0, "A", "red")
]
}
});
<script src="https://cdn.jsdelivr.net/npm/moment#2.27.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.4.0/dist/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#0.1.1"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair#1.2.0/dist/chartjs-plugin-crosshair.min.js"></script>
<canvas id="chart" height="100"></canvas>
https://jsfiddle.net/Lb0k2sqx/1/
I am trying to add percentage to pie chart in ChartJS 3.2.1
All the answers and code I have found from extensive searching reference ChartJS version 1 or 2.
Including This question and This question and this question which all fail or do not actually change any tooltip display.
There is numerous reference to https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.7.0 but this doesn't work on ChartJS v3; I have installed the ChartJS Datalabels for Version 3 from here:
https://github.com/chartjs/chartjs-plugin-datalabels/releases/tag/v2.0.0
but using This answer still does not work.
I can not see on the ChartJS Datalabels Plugin documentation how to implement what I'm looking for.
I am looking for the percentage for each piece of the pie to be shown on the tooltip hover OR on the pie piece itself, but not on the label/legend.
I can't see anything on the ChartJS Tooltip documentation about how to actually edit the textual content of the tooltip.
So, my code:
JS:
var dnct1 = document.getElementById('DoeNut1');
var myChart1 = new Chart(dnct1, {
type: 'doughnut',
data: {
labels: ["Scotland and Northern Ireland","North East England","North West","Midlands","East Anglia","South England"],
datasets: [{
label: ["Scotland and Northern Ireland","North East England","North West","Midlands","East Anglia","South England"],
data: ["510","887","720","837","993","774","977"],
borderWidth: 0,
hoverOffset: 5,
backgroundColor: ['#F3AC16','#9F9F9F','#FF3355', '#55EE22','#354D73','#553FCF'],
cutout: 0
}]
},
options: {
tooltips: {
enabled: true,
},
layout: {
padding: {
bottom: 25
}
},
plugins: {
/** Imported from a question linked above.
Apparently Works for ChartJS V2 **/
datalabels: {
formatter: (value, dnct1) => {
let sum = 0;
let dataArr = dnct1.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
let percentage = (value*100 / sum).toFixed(2)+'%';
return percentage;
},
color: '#ff3'
}
}
}
});
HTML:
<div class='chartBox'>
<h2>Title</h2>
<canvas id='DoeNut1'></canvas>
</div>
The above no browser console errors are returned and all charts display correctly but the tooltips don't show any percentages. I can't see what's wrong.
If you are using ChartJS v3 then I got it to work without any additional plugins. I overrode the tooltip at the dataset level.
datasets: [{
label: 'Industries',
data: [1, 5, 10, 14, 15],
tooltip: {
callbacks: {
label: function(context) {
let label = context.label;
let value = context.formattedValue;
if (!label)
label = 'Unknown'
let sum = 0;
let dataArr = context.chart.data.datasets[0].data;
dataArr.map(data => {
sum += Number(data);
});
let percentage = (value * 100 / sum).toFixed(2) + '%';
return label + ": " + percentage;
}
}
}
}]
To use the datalabels plugin you will need to register it also please read the migration guide (https://www.chartjs.org/docs/master/getting-started/v3-migration.html) first because you are using v2 syntax for your tooltip for example which wont work.
To get the percentage in the tooltip you can use any of the callbacks (https://www.chartjs.org/docs/master/configuration/tooltip.html#tooltip-callbacks) see example below for datalabels and the footer callback to display the percentages:
var dnct1 = document.getElementById('DoeNut1');
var myChart1 = new Chart(dnct1, {
type: 'doughnut',
data: {
labels: ["Scotland and Northern Ireland", "North East England", "North West England", "North Wales and West Midlands", "East Midlands and East Anglia", "South Wales and South West England", "South East England"],
datasets: [{
label: ["Scotland and Northern Ireland", "North East England", "North West England", "North Wales and West Midlands", "East Midlands and East Anglia", "South Wales and South West England", "South East England"],
data: ["510", "887", "720", "837", "993", "774", "977"],
borderWidth: 0,
hoverOffset: 5,
backgroundColor: ['#F3AC16', '#9F9F9F', '#FF3355', '#55EE22', '#354D73', '#666633', '#553FCF'],
cutout: 0
}]
},
options: {
layout: {
padding: {
bottom: 25
}
},
plugins: {
tooltip: {
enabled: true,
callbacks: {
footer: (ttItem) => {
let sum = 0;
let dataArr = ttItem[0].dataset.data;
dataArr.map(data => {
sum += Number(data);
});
let percentage = (ttItem[0].parsed * 100 / sum).toFixed(2) + '%';
return `Percentage of data: ${percentage}`;
}
}
},
/** Imported from a question linked above.
Apparently Works for ChartJS V2 **/
datalabels: {
formatter: (value, dnct1) => {
let sum = 0;
let dataArr = dnct1.chart.data.datasets[0].data;
dataArr.map(data => {
sum += Number(data);
});
let percentage = (value * 100 / sum).toFixed(2) + '%';
return percentage;
},
color: '#ff3',
}
}
},
plugins: [ChartDataLabels]
});
<body>
<canvas id="DoeNut1" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-rc.1/chartjs-plugin-datalabels.js" ></script>
</body>
I am using chart.js 2.9.3. I have used onClick handler in options as well as getElementAtEvent to achieve what I want but I get the items empty array and the event doesn't have the the information about the area that is clicked. Clicking on each point works fine, but clicking on Area of whole line doesn't give me much information.
Here is the code snippet of my chart.
var chart_canvas = document.getElementById("myChart");
var stackedLine = new Chart(chart_canvas, {
type: 'line',
data: {
labels: ["0.0", "0.2", "0.4", "0.6", "0.8", "1.0"],
fill: true,
datasets: [{
label: 'One',
pointRadius: 3,
data: [.5, .3, .2, .1, .4, .3],
borderWidth: 1
}, {
label: 'Two',
pointRadius: 3,
data: [.0, .1, .2, .4, .1, .4],
borderWidth: 1
}]
},
options: {
responsive: true,
onClick : (event, items) =>{
console.log("event",event);
},
}
});
Finally I tried to solve this using some DOM manipulation to get the information by clicking on area of each filled area of line chart.
Example is here:
https://codepen.io/amiablesyed/pen/RwKxaqE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.js"></script>
</head>
<body>
<div style="background-color: gainsboro">
Data:<span id="Data"></span>
</div>
<div style="width: 500px; height: 400px">
<canvas id="mainChart" width="700" height="400"> </canvas>
</div>
<script>
var ctx = document.getElementById("mainChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "line",
data: {
labels: [
"Red",
"Blue",
"Yellow",
"Green",
"Purple",
"Orange",
"Pink",
"Black",
"Grey",
],
datasets: [
{
lineTension: 0,
label: "Data A",
data: [11, 12, 1, 3, 1, 1, 3, 5, 2],
backgroundColor: "#ffe8e8",
borderColor: ["#ffe8e8"],
borderWidth: 1,
},
{
lineTension: 0,
label: "Data B",
data: [12, 17, 3, 5, 2, 3, 6, 8, 4],
backgroundColor: "#e2ffcb",
borderColor: ["#e2ffcb"],
borderWidth: 1,
},
{
lineTension: 0,
label: "Data C",
data: [15, 23, 6, 9, 3, 8, 7, 10, 11],
backgroundColor: "#ffe689",
borderColor: ["#ffe689"],
borderWidth: 1,
},
],
},
});
document
.getElementById("mainChart")
.addEventListener("click", function (e) {
areaClick(e);
});
function areaClick(e) {
if (!myChart.scales["y-axis-0"]._gridLineItems) return;
var gridLineH = myChart.scales["y-axis-0"]._gridLineItems[0];
var lenH = myChart.scales["y-axis-0"]._gridLineItems.length;
var width = gridLineH.x2 - gridLineH.x1;
var yMax = myChart.scales["y-axis-0"].max;
var yMaxPixcel = myChart.scales["y-axis-0"].bottom - gridLineH.y1;
var gridLineV = myChart.scales["x-axis-0"]._gridLineItems[0];
var lenV = myChart.scales["x-axis-0"]._gridLineItems.length;
var height = gridLineV.y2 - gridLineV.y1;
var xMax = myChart.scales["x-axis-0"].maxIndex;
var scaleX = width / (lenV - 1);
var scaleY = height / (lenH - 1);
var yPixcel =
yMaxPixcel - (e.pageY - e.target.offsetTop - gridLineH.y1);
var yVal = yMax * (yPixcel / yMaxPixcel);
console.log(yVal);
var curXPixcel = e.pageX - e.target.offsetLeft - gridLineH.x1;
var xVal = Math.floor(curXPixcel / scaleX);
var xAxis = myChart.scales["x-axis-0"];
var label = "Others";
if (xVal < xAxis.maxIndex && xVal >= xAxis.minIndex) {
var x1x2Pixcels = getx1x2Pixcels(xVal, gridLineH.x1);
document.getElementById("Data").innerText = getDataLable(
xVal,
yVal,
x1x2Pixcels,
curXPixcel
);
}
}
function getx1x2Pixcels(xVal, offset) {
var x1x2 = {};
x1x2.x1 =
myChart.scales["x-axis-0"]._gridLineItems[xVal].x1 - offset + 0.5;
x1x2.x2 =
myChart.scales["x-axis-0"]._gridLineItems[xVal + 1].x1 - offset + 0.5;
return x1x2;
}
function getDataLable(xVal, yVal, x1x2Pixcels, curXPixcel) {
var datasetes = myChart.config.data.datasets;
var dataLable = "";
if (datasetes.length > 1) {
for (var i = datasetes.length; i > 0; i--) {
if (myChart.getDatasetMeta(i - 1).hidden) continue;
var dataA = datasetes[i - 1];
var dataALable = dataA.label;
var y1 = dataA.data[xVal];
var y2 = dataA.data[xVal + 1];
var isBelow = IsBelowTheLine(
curXPixcel,
yVal,
x1x2Pixcels.x1,
y1,
x1x2Pixcels.x2,
y2
);
if (isBelow) {
dataLable = isBelow ? dataALable : dataLable;
if (i == 1) {
var isBelowZeroLine = IsBelowTheLine(
curXPixcel,
yVal,
x1x2Pixcels.x1,
0,
x1x2Pixcels.x2,
0
);
dataLable = isBelowZeroLine ? "" : dataLable;
}
} else break;
}
}
return dataLable;
}
function IsBelowTheLine(x, y, x1, y1, x2, y2) {
var v1 = [x2 - x1, y2 - y1];
var v2 = [x2 - x, y2 - y];
var xp = v1[0] * v2[1] - v1[1] * v2[0];
return xp >= 0;
}
</script>
</body>
</html>
I need to plot users office timings (in and out time) of a day in a graph using Angular JS.
For example I have reached office at 10 and then gone out for lunch at 1, then again came at 2 and then gone out at 2:30 for some work and so on.....
So in graph, y axis should show time from 10 to 6 and it should plot time on graph, like 1st it should point at 10, then on 1, then on 2 and then on 2:30 and so on...
So my questions are:
1) Using which graph, this could be achieved in a single bar?
2) I am using stacked highchart, however since stacked chart add the points, I am sending difference between the two data, so first I am sending 10, another I want to point at 1, so I am sending 3 and so on..., however it fill the entire block with a color, like from 10-1 one color, 1-2 one color and so on..., what I need is, first it should point at 10 then at 1,then at 2...and so on it should not fill it with any color.
What I have achieved so far is :https://plnkr.co/edit/CgnFfTbJ3BkyjHzErQGk?p=preview
but what I want to achieve is something like this
Please help.
You could also check the code below:
<html>
<head>
<title>Highcharts Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"> </div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'column'
};
var title = {
text: 'Stacked column chart'
};
var xAxis = {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
};
var yAxis ={
min: 10,
max:18,
tickInterval:1,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
};
var legend = {
enabled:false
};
var tooltip = {
enabled:false
};
var plotOptions = {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
};
var credits = {
enabled: false
};
var series= [
{ name: 'John',
data: [1]
},
{ name: 'John',
data: [0.5]
},
{ name: 'John',
data: [1]
},
{
name: 'Jane',
data: [3]
}, {
name: 'Joe',
data: [10]
}];
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.legend = legend;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.credits = credits;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
</script>
</body>
</html>
Here is a example using columnrange series.
Live example: https://jsfiddle.net/mzb3bpg2/
const options = {
chart: {
type: 'columnrange'
},
series: [{
name: 'Temperatures',
data: [{
borderWidth: 2,
borderColor: Highcharts.getOptions().colors[1],
color: 'rgba(0,0,0,0)',
x: 0,
low: 0,
high: 10
}, {
borderWidth: 2,
borderColor: Highcharts.getOptions().colors[1],
color: 'rgba(0,0,0,0)',
x: 0,
low: 10,
high: 16
}, {
borderWidth: 2,
borderColor: Highcharts.getOptions().colors[1],
color: 'rgba(0,0,0,0)',
x: 0,
low: 16,
high: 20
}]
}]
}
const chart = Highcharts.chart('container', options);
[EDIT]
More complete one:
Live example:
https://jsfiddle.net/fzv2jd3c/