I'm trying to integrate this tooltip-based-on-mouse-position customization into a react-js-2 bar chart. I see where to put the new options:
options: {
tooltips: {
mode: 'index',
position: 'cursor',
intersect: false
}
}
in my existing options block declaration. But I don't understand how/where in the app do I integrate the related function?
Chart.Tooltip.positioners.cursor = function(chartElements, coordinates) {
return coordinates;
};
I've tried simply declaring it as Chart.Tooltip.positioners.cursor = ... or ChartJS.Tooltip.positioners.cursor = ... or Tooltip.positioners.cursor = ... in a few different places but it either causes an error or has no effect. I'm on ChartJS v3.8.0 and react-js-2 v4.1.0. Thank you.
Your options are wrong, you need to define the tooltip options in the options.plugins.tooltip namespace and not the options.tooltips namespace.
Example:
Chart.Tooltip.positioners.mouse = function(items, evtPos) {
return evtPos
};
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
plugins: {
tooltip: {
intersect: false,
position: 'mouse',
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
</body>
React import:
import { Chart, registerables, Tooltip } from "chart.js";
import { Chart as ReactChartJs } from "react-chartjs-2";
Chart.register(...registerables);
Tooltip.positioners.mouse = function(items, evtPos) {
return evtPos
};
const options = {
plugins: {
tooltip: {
position: 'mouse',
intersect: false
}
}
}
<ReactChartJs type="line" data={data} options={options} />
Related
is it possible to call a default on-canvas tooltip at a fixed datalabel position without hovering the mouse?
You can dispatch hover events as in this example, got from this answer:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0"></script>
<button id="a">Hover a</button>
<button id="b">Hover b</button>
<button id="c">Hover c</button>
<button id="d">Hover d</button>
<button id="e">Hover all</button>
<canvas id="chart"></canvas>
<script>
let c = new Chart($("#chart"), {
type: "doughnut",
data: {
labels: ["a", "b", "c", "d"],
datasets: [
{
data: [1, 2, 4, 8],
backgroundColor: ["red", "blue", "green", "orange"]
}
]
}
});
console.log("chart drawn!");
$("#a").on("click", function () {
t(0);
});
$("#b").on("click", function () {
t(1);
});
$("#c").on("click", function () {
t(2);
});
$("#d").on("click", function () {
t(3);
});
$("#e").on("click", function () {
hoverAll();
});
function t(idx) {
var meta = c.getDatasetMeta(0),
rect = c.canvas.getBoundingClientRect(),
point = meta.data[idx].getCenterPoint(),
evt = new MouseEvent("mousemove", {
clientX: rect.left + point.x,
clientY: rect.top + point.y
}),
node = c.canvas;
node.dispatchEvent(evt);
}
function hoverAll() {
for (let i = 0; i < 4; i++) {
console.log(i);
t(i);
}
}
</script>
But, hover events seems to be mutually exclusive, meaning that you have only one at once, because there is only one mouse that can hover over one element once at a time. That is why the added hoverall button does not work, and leaves the last one hovered element.
If you want all the datasets and records of your chart displayed, the datalabels plugin seems the way to go, as suggested in the comments.
You can use the setActiveElements function like so:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink',
backgroundColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange',
backgroundColor: 'orange'
}
]
},
options: {}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);
document.getElementById("tt").addEventListener("click", () => {
const {
tooltip,
chartArea
} = chart;
tooltip.setActiveElements([{
datasetIndex: 0,
index: 1
},
{
datasetIndex: 1,
index: 1
}
]);
chart.update();
});
<body>
<button id="tt">
Make tooltip active
</button>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>
I hope someone can help! I am using chart.js 3.5.1 and have a specific chart in mind. However, a lot of the documentation online is for seemingly an old version of chart.js. I need a simple line chart with data on the y axis both above and below zero. To emphasis this I would like a darker axis line on the 0, all online material suggests that I can use zeroLineColor. However, the new version of chart.js does not seem to support this. All the online material is using xAxis:[] and yAxis:[], while mine is using simply x:{} and y:{} which makes me think that the zeroLinecolor attribute has been deprecated, if so can what I require be implemented another way?
cheers
You can use the scriptable options for this:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
y: {
grid: {
color: (ctx) => (ctx.index === 0 ? 'black' : 'rgba(0, 0, 0, 0.1)')
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>
I have finally found the answer! if it of use to anyone, then you need to add a scriptable component to grid:
grid: {
color: context => context.tick.value == 0 ? '#555555' : '#CCCCCC'
}
Is there any way to set a subsript text like Q/Pb inst for an axis title in Chart.js.
Thx in advance
You can use the Plugin Core API. It offers different hooks that may be used for executing custom code. In below code snippet, I use the afterDraw hook to draw the title using two different fonts.
Assuming you want to draw the x-axis title, please note that inside chart options, I also defined some layout padding. This prevents the title from overlapping the chart.
layout: {
padding: {
bottom: 20
}
},
Please take a look at the runnable code below and see how it works.
new Chart(document.getElementById('myChart'), {
type: 'bar',
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
ctx.save();
ctx.textAlign = 'right';
ctx.font = '12px Arial';
ctx.fillStyle = 'gray';
ctx.fillText('Q/P', chart.chart.width / 2, chart.chart.height -14);
ctx.textAlign = 'left';
ctx.font = '8px Arial';
ctx.fillText('b inst', chart.chart.width / 2, chart.chart.height - 10);
ctx.restore();
}
}],
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
data: [10, 12, 8, 6],
backgroundColor: ['red', 'blue', 'green', 'orange']
}]
},
options: {
layout: {
padding: {
bottom: 20
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>
I've got a web-app project that uses two stylesheets to define two color sets (day & night mode). Each stylesheet defines the same CSS variables with different colors (e.g. "--primaryColor: 'white'" in dayMode.css and "--primaryColor: 'black'" in nightMode.css. The stylesheet is toggled when clicking a button.
Now, all elements are colored by referring to these variables - both in the CSS and JS code. For example:
div {background-color: var(--primaryColor);}
$(this).css({backgroundColor: "var(--primaryColor)"});
When switching the stylesheet, all elements adjust to the new definitions. Now I set up my very first Chart.js and tried to color it with my variables, like:
yAxes: [{
ticks: {
fontColor: "var(--primaryTextColor)"
}
}]
But that doesn't work. Any idea how to fix this? Thanks in advance!
CSS variables are used in stylesheet, if you would access them in JS you can do like below snippet:
var style = getComputedStyle(document.body);
var primCol = style.getPropertyValue('--primaryColor');
$("#mydiv").text("primaryColor: " + primCol);
:root {
--primaryColor: #336699;
}
#mydiv {
background-color: var(--primaryColor);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">
</div>
So in a chart.js:
var style = getComputedStyle(document.body);
var primCol = style.getPropertyValue('--primaryColor');
var chartCol = style.getPropertyValue('--chartColor');
var chartData = {
labels: ['a', 'b', 'c', 'd'],
datasets: [{
label: 'value',
backgroundColor: 'rgba(219, 20, 0, 0.2)',
borderColor: chartCol,
data: [30, 50, 25, 10]
}]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myBar = new Chart(ctx, {
type: 'line',
data: chartData,
options: {
legend: { display: false },
scales: {
yAxes: [{
ticks: {
fontColor: primCol,
}
}],
xAxes: [{
ticks: {
beginAtZero: true
}
}],
}
}
});
:root {
--primaryColor: #00ff00;
--chartColor: #ff0000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myChart" height="300" width="500"></canvas>
Is it possible to define a bar chart with a multi level/category axis?
For instance I'd like to display the Region/Province categories like in this Excel chart:
I found this example using multiple xAxes.
xAxes:[
{
id:'xAxis1',
type:"category",
ticks:{
callback:function(label){
var month = label.split(";")[0];
var year = label.split(";")[1];
return month;
}
}
},
{
id:'xAxis2',
type:"category",
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
ticks:{
callback:function(label){
var month = label.split(";")[0];
var year = label.split(";")[1];
if(month === "February"){
return year;
}else{
return "";
}
}
}
}
]
The problem is it seems that the two axes are not really linked and the alignment of second axis is based on values instead of aligning in middle of lower level category. this case cause issues
Is there a clean way to achieve this in chart.js?
Update:
I ended up creating a feature request on chartjs.
you can provide value separately for different axis via datesets and provide an object with different configuration option (borderColor, pointBackgroundColor, pointBorderColor) etc, i hope It'll help.
here is the link for the with an update (fiddle you shared) Updated Fiddle
data: {
labels: ["January;2015", "February;2015", "March;2015", "January;2016", "February;2016", "March;2016"],
datasets: [{
label: '# of Votes',
xAxisID:'xAxis1',
data: [12, 19, 3, 5, 2, 3]
},
// here i added another data sets for xAxisID 2 and it works just fine
{
label: '# of Potatoes',
xAxisID:'xAxis2',
data: [9, 17, 28, 26, 29, 9]
}]
}
I hope that solves your problem :)
Hope this helps,
I did a bit of research and couldn't find methods to implement your solution in chartjs. Chartjs has grouped bar charts but not subgrouped bar charts like in your case.
Example: http://jsfiddle.net/harshakj89/ax3zxtzw/
Here are some alternatives,
D3js (https://d3js.org/) can be used to create sub grouped bar charts.Data can be loaded from csv or json. D3 is highly configurable, but you may have to put some effort than chartsjs.
https://plnkr.co/edit/qGZ1YuyFZnVtp04bqZki?p=preview
https://stackoverflow.com/questions/37690018/d3-nested-grouped-bar-chart
https://stackoverflow.com/questions/15764698/loading-d3-js-data-from-a-simple-json-string
ZingChart is a commercial tool and can be used to implement bar charts with sub groupes.
https://www.zingchart.com/docs/chart-types/bar-charts/
But I prefer D3 over this library. because D3 comes under BSD License.
This should work as per your requirement http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/#8-grouped-bar-chart
The best library I could found to have exactly this feature is Highcharts, this is my implementation:
and here http://jsfiddle.net/fieldsure/Lr5sjh5x/2/ you can find out how to implement it.
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: "container",
type: "column",
borderWidth: 5,
borderColor: '#e8eaeb',
borderRadius: 0,
backgroundColor: '#f7f7f7'
},
title: {
style: {
'fontSize': '1em'
},
useHTML: true,
x: -27,
y: 8,
text: '<span class="chart-title"> Grouped Categories with 2 Series<span class="chart-href"> Black Label </span> <span class="chart-subtitle">plugin by </span></span>'
},
yAxis: [{ // Primary yAxis
labels: {
format: '${value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
title: {
text: 'Daily Tickets',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Secondary yAxis
title: {
text: 'Invoices',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '${value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}]
,
series: [{
name: 'Daily',
type: 'column',
yAxis: 1,
data: [4, 14, 18, 5, 6, 5, 14, 15, 18],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Invoices',
type: 'column',
data: [4, 17, 18, 8, 9, 5, 13, 15, 18],
tooltip: {
valueSuffix: ' °C'
}
}],
xAxis: {
categories: [{
name: "1/1/2014",
categories: ["Vendor 1", "Vendor 2", "Vendor 3"]
}, {
name: "1/2/2014",
categories: ["Vendor 1", "Vendor 2", "Vendor 3"]
}, {
name: "1/3/2014",
categories: ["Vendor 1", "Vendor 2", "Vendor 3"]
}]
}
});
});
body {
padding: 0px !important;
margin: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>
<div id="container" class="chart-container"></div>
But the problem is the library is not free for commercial purposes, and this is the Chartjs implementation, in my case it is look like this:
const data ={"labels":[{"label":"Exams","children":["Wellness Examination"]},{"label":"Surgery","children":["Neuter Surgery"]},{"label":"Vaccines","children":["Bordetella"]},{"label":"Dentistry","children":["Dental Cleaning"]},{"label":"Diagnostics","children":["Other","Pre-Anesthetic","Adult Diagnostics","Pre-Anesthetic Diagnostics","Heartworm & Tick Borne Disease Test"]},{"label":"Treatments/Other","children":["Other","Microchip"]}],"datasets":[{"label":"Consumed","backgroundColor":"red","tree":[{"value":0,"children":["0"]},{"value":0,"children":["0"]},{"value":1,"children":["1"]},{"value":0,"children":["0"]},{"value":15,"children":["0","1","3","11","0"]},{"value":15,"children":["2","13"]}]},{"label":"Purchased","backgroundColor":"blue","tree":[{"value":28,"children":["28"]},{"value":1,"children":["1"]},{"value":24,"children":["24"]},{"value":10,"children":["10"]},{"value":103,"children":["2","16","34","49","2"]},{"value":165,"children":["75","90"]}]}]};
window.onload = () => {
const ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: data,
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Hierarchical Bar Chart'
},
layout: {
padding: {
// add more space at the bottom for the hierarchy
bottom: 45
}
},
scales: {
xAxes: [{
type: 'hierarchical',
stacked: false,
// offset settings, for centering the categorical
//axis in the bar chart case
offset: true,
// grid line settings
gridLines: {
offsetGridLines: true
}
}],
yAxes: [{
stacked: false,
ticks: {
beginAtZero: true
}
}]
}
}
});
};
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/chart.js/dist/Chart.bundle.js"></script>
<script src="https://unpkg.com/chartjs-scale-hierarchical"></script>
<div id="container" style="width: 75%;">
<canvas id="canvas"></canvas>
</div>
for each more column just add another dataset.