We Keep Coding

How can I have common tooltip for a grid in Apache echart?

I have two line charts in a grid so that I can have common zooming. Now, I want to have tooltip such that when I hover on one chart, tooltip popups in other as well. So, I can see, how the values are in both charts at the specific x-axis value.
Below is my code,
let base = +new Date(1968, 9, 3);
let oneDay = 24 * 3600 * 1000;
let date = [];
let values1 = [Math.random() * 300];
let values2 = [Math.random() * 300];
for (let i = 1; i < 20000; i++) {
var now = new Date((base += oneDay));
date.push(i)
// date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
values1.push(Math.round((Math.random() - 0.5) * 20 + values1[i - 1]));
values2.push(Math.round((Math.random() - 0.5) * 20 + values2[i - 1]));
}
option = {
// tooltip: {
// trigger: 'none',
// // position: function (pt) {
// // return [pt[0], '10%'];
// // }
// },
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
grid: [
{
// left: '3%',
// right: '4%',
top: '50%',
containLabel: true,
// show: true
},
{
// left: '3%',
// right: '4%',
bottom: '50%',
containLabel: true,
// show: true
},
],
xAxis: [
{
type: 'category',
boundaryGap: false,
data: date,
gridIndex: 0,
},
{
type: 'category',
boundaryGap: false,
data: date,
gridIndex: 1,
},
],
yAxis: [
{
type: 'value',
boundaryGap: [0, '100%'],
gridIndex: 0,
},
{
type: 'value',
boundaryGap: [0, '100%'],
gridIndex: 1,
},
],
dataZoom: [
{
type: 'inside',
// start: 0,
// end: 10
xAxisIndex: [0, 1],
},
// {
// // start: 0,
// // end: 10
// xAxisIndex: [0, 1],
// }
],
series: [
{
name: 'Fake Data',
type: 'line',
symbol: 'none',
sampling: 'lttb',
itemStyle: {
color: 'rgb(255, 70, 131)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 158, 68)'
},
{
offset: 1,
color: 'rgb(255, 70, 131)'
}
])
},
data: values1,
gridIndex: 0,
xAxisIndex: 0,
yAxisIndex: 0,
},
{
name: 'Faker Data',
type: 'line',
symbol: 'none',
sampling: 'lttb',
itemStyle: {
color: 'rgb(255, 70, 131)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 158, 68)'
},
{
offset: 1,
color: 'rgb(255, 70, 131)'
}
])
},
data: values2,
gridIndex: 1,
xAxisIndex: 1,
yAxisIndex: 1,
}
]
};
The above code will render 2 charts with common zooming. I tried tooltip with item, axes and none but they didnt work.
How can I do this?
Thank you.

Solution 1
First, when using this kind of chart (with xAxis), it's recommanded to use trigger: "axis".
Then to connect the tooltip, what you actually want to do is to connect the axisPointer :
// add this to your chart option
axisPointer: {
link: [
{
xAxisIndex: 'all'
}
]
},
This being done, your 2 tooltips will be connected. But echart seems to struggle to display the tooltip on large dataset using xAxis.type = 'category' (20K points in your example). If you want to use big dataset with 'date' format on x, I recommand this :
Format you series like a list of [date, value]
Use xAxis.type = 'time'
Remove xAxis.data
Here is the full working code of your example.
Solution 2
Another solution would be to create 2 separate charts and to connect them (zoom, tooltip ...) using
echarts.connect([chart1, chart2]);
Here is what the code would look like with this method :
var myChart1 = echarts.init(document.getElementById('main1'));
var myChart2 = echarts.init(document.getElementById('main2'));
let base = +new Date(1968, 9, 3);
let oneDay = 24 * 3600 * 1000;
let date = [];
let values1 = [Math.random() * 300];
let values2 = [Math.random() * 300];
for (let i = 1; i < 200; i++) {
var now = new Date((base += oneDay));
date.push(i)
// date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
values1.push(Math.round((Math.random() - 0.5) * 20 + values1[i - 1]));
values2.push(Math.round((Math.random() - 0.5) * 20 + values2[i - 1]));
}
var option1 = {
tooltip: {
trigger: 'axis',
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: date
}
],
yAxis: [
{
type: 'value',
boundaryGap: [0, '100%'],
},
],
dataZoom: [
{
type: 'inside',
},
],
series: [
{
name: 'Fake Data',
type: 'line',
symbol: 'none',
sampling: 'lttb',
itemStyle: {
color: 'rgb(255, 70, 131)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 158, 68)'
},
{
offset: 1,
color: 'rgb(255, 70, 131)'
}
])
},
data: values1,
},
]
};
var option2 = {
tooltip: {
trigger: 'axis',
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: date
}
],
yAxis: [
{
type: 'value',
boundaryGap: [0, '100%'],
},
],
dataZoom: [
{
type: 'inside',
},
],
series: [
{
name: 'Faker Data',
type: 'line',
symbol: 'none',
sampling: 'lttb',
itemStyle: {
color: 'rgb(255, 70, 131)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 158, 68)'
},
{
offset: 1,
color: 'rgb(255, 70, 131)'
}
])
},
data: values2,
},
]
};
myChart1.setOption(option1)
myChart2.setOption(option2)
echarts.connect([myChart1, myChart2]);
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<div id="main1" style="width: 600px; height:200px;"></div>
<div id="main2" style="width: 600px; height:200px;"></div>
</body>
</html>

Chart.js v3.9.1 - How to always show tooltip of stacked bar chart

I've made a progress bar with the stacked100 plugin. The chart consists of 2 datasets forming the progress bar. The first dataset tooltip is the one I want to always show, the second dataset tooltip will be hidden. I can't figure out how to make the first dataset tooltip to always show.
https://jsfiddle.net/tLcfwvr7/4/
Chart.register(ChartjsPluginStacked100.default);
// setup
const labelChart = ''
const data = {
labels: ['Progress'],
datasets: [{
label: labelChart,
data: [75.455],
backgroundColor: 'rgba(0, 168, 244, 1)',
},
{
label: labelChart,
data: [24.545],
backgroundColor: 'rgba(233, 236, 239, 1)',
}
]
};
// config
const config = {
type: 'bar',
data,
options: {
barThickness: 10,
indexAxis: 'y',
plugins: {
legend: {
display: false
},
tooltip: {
enabled: true,
backgroundColor: 'rgba(50, 50, 50, 1)',
displayColors: false,
yAlign: 'bottom',
caretPadding: 6,
padding: 5,
bodyFont: {
family: "'Poppins', sans-serif",
size: 12,
},
filter: function(tooltipItem) {
return tooltipItem.datasetIndex === 0;
},
callbacks: {
title: () => null,
label: (tooltipItem) => {
const data = tooltipItem.chart.data;
const datasetIndex = tooltipItem.datasetIndex;
const index = tooltipItem.dataIndex;
const rateValue = data.calculatedData[datasetIndex][index];
return `${rateValue}%`;
}
},
},
stacked100: {
enable: true,
replaceTooltipLabel: false,
}
},
scales: {
x: {
grid: {
display: false,
borderColor: 'rgba(0, 0, 0, 0)'
},
ticks: {
display: false
}
},
y: {
beginAtZero: true,
ticks: {
display: false
},
grid: {
display: false,
borderColor: 'rgba(0, 0, 0, 0)'
}
}
},
layout: {
padding: 10
}
}
};
// render init block
const progressChart = new Chart(
document.getElementById('progressChart'),
config
);

Is there anyway to overlap one barchart with another in chart js without stacking them?

I tried using the stack and offset but it does not seem to work
This is my code:
import React, {
useEffect
} from 'react';
import {
Bar
} from 'react-chartjs-2';
import useWindowWidth from 'wa-shared/src/hooks/useWindowWidth';
const state = {
count: 0,
data: {
labels: [
['Total Users'],
['Users with', 'Active', 'Session'],
['Created 1', 'or More', 'Videos'],
['Shared 1', 'or More', 'Videos']
],
datasets: [{
backgroundColor: '#26863D',
data: [70, 66, 57, 1],
barThickness: '35',
},
{
backgroundColor: '#F2F2F2',
data: [70, 70, 70, 70],
borderRadius: '5',
barThickness: '35',
}
]
}
}
const App = ({}) => {
const width = useWindowWidth();
useEffect(() => {});
return ( <
div className = 'singlebar-chart'
id = "barchart" >
<Bar> data = {
state.data
}
options = {
{
scales: {
x: {
grid: {
display: false,
},
offset: true,
ticks: {
maxRotation: 0,
minRotation: 0,
font: {
size: 8,
}
},
},
y: {
min: 0,
max: 100,
ticks: {
fontColor: '#8A8A8A',
font: {
size: 8,
},
stepSize: 25,
callback: function(value) {
return value + "%"
},
},
scaleLabel: {
display: true,
labelString: "Percentage",
},
grid: {
display: false,
}
}
},
plugins: {
legend: {
display: false,
},
}
}
</Bar>
</div>
)
}
export default App;
.singlebar-chart{
width: 95%;
}

You can use a second x axis and map the other dataset to that axes:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
backgroundColor: 'orange',
xAxisID: 'x2'
}
]
},
options: {
scales: {
x: {},
x2: {
display: false // Dont show the axes since it is just a duplicate
}
}
}
}
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.8.0/chart.js"></script>
</body>
Although this gives the exect same result as setting stacked true on the x axis.

ChartJS multiple annotations (vertical lines)

i am trying to put 2 vertical lines on a chart.JS chart using the annotations plugin. i am using the following versions:
chart.js = 2.8.0
annotations plugin = 0.5.7
here's the JSFiddle
please see my code below:
var ann = ["4.35"];
var ann_labels = ["start"];
var annotations_array = ann.map(function(value, index) {
return {
type: 'line',
id: 'vline' + index,
mode: 'vertical',
scaleID: 'x-axis-0',
value: value,
borderColor: 'green',
borderWidth: 1,
label: {
enabled: true,
position: "bottom",
content: ann_labels
}
}
});
var ann2 = ["4.29"];
var ann_labels2 = ["stop"];
var annotations_array2 = ann2.map(function(value, index) {
return {
type: 'line',
id: 'vline2' + index,
mode: 'vertical',
scaleID: 'x-axis-0',
value: value,
borderColor: 'green',
borderWidth: 1,
label: {
enabled: true,
position: "top",
content: ann_labels2
}
}
});
var ctx = document.getElementById('test').getContext('2d');
var test = new Chart(ctx, {
type: 'line',
data: {
labels: ["1.44","4.03","4.35","3.99","3.58","3.75","4.29","5.02","5.95","6.65"],
datasets: [{
data: ["1", "2", "1", "2", "1", "2", "1", "2", "1", "2"],
yAxisID: 'A',
backgroundColor: [
'rgba(91, 192, 222, 0.1)',
],
borderColor: [
'rgba(0, 123, 255, 0.8)',
],
borderWidth: 1.3,
},
{
data: ["10", "11", "12","13","14","15","16","17",],
yAxisID: 'B',
backgroundColor: [
'rgba(255, 206, 86, 0.0)',
],
borderColor: [
'rgba(217, 83, 79, 0.6)',
],
borderWidth: 1.3,
}]
},
options: {
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: annotations_array
},
maintainAspectRatio: true,
scales: {
yAxes: [{
id: 'A',
ticks: {
callback: function(value, index, values) {
return value + ' m';
},
reverse: true,
}
},
{
id: 'B',
position: 'right',
ticks: {
callback: function(value, index, values) {
return value + ' °C';
},
reverse: true,
}
}]
},
elements: {
point:{
radius: 0,
}
},
legend: {
position: 'bottom',
display: false,
},
}
});
however, i am unable to display both vertical lines (annotations_array and annotations_array2) at the same time.
everything works fine when i do this:
annotations: annotations_array
or this:
annotations: annotations_array2
but when i try to print both arrays, it doesnt work:
annotations: annotations_array, annotations_array2
I have also tried this without any luck:
annotations: [{annotations_array},{annotations_array2}]
does anyone know what am i doing wrong?
Thanks in advance!

You have to provide both annotations as object in 1 array, not an array containing objects containing arrays, see example:
var ann = ["4.35", "4.29"];
var ann_labels = ["start", "stop"];
var annotations_array = ann.map(function(value, index) {
return {
type: 'line',
id: 'vline' + index,
mode: 'vertical',
scaleID: 'x-axis-0',
value: value,
borderColor: 'green',
borderWidth: 1,
label: {
enabled: true,
position: "bottom",
content: ann_labels[index]
}
}
});
var ctx = document.getElementById('test').getContext('2d');
var test = new Chart(ctx, {
type: 'line',
data: {
labels: ["1.44", "4.03", "4.35", "3.99", "3.58", "3.75", "4.29", "5.02", "5.95", "6.65"],
datasets: [{
data: ["1", "2", "1", "2", "1", "2", "1", "2", "1", "2"],
yAxisID: 'A',
backgroundColor: [
'rgba(91, 192, 222, 0.1)',
],
borderColor: [
'rgba(0, 123, 255, 0.8)',
],
borderWidth: 1.3,
},
{
data: ["10", "11", "12", "13", "14", "15", "16", "17", ],
yAxisID: 'B',
backgroundColor: [
'rgba(255, 206, 86, 0.0)',
],
borderColor: [
'rgba(217, 83, 79, 0.6)',
],
borderWidth: 1.3,
}
]
},
options: {
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: annotations_array
},
maintainAspectRatio: true,
scales: {
yAxes: [{
id: 'A',
ticks: {
callback: function(value, index, values) {
return value + ' m';
},
reverse: true,
}
},
{
id: 'B',
position: 'right',
ticks: {
callback: function(value, index, values) {
return value + ' °C';
},
reverse: true,
}
}
]
},
elements: {
point: {
radius: 0,
}
},
legend: {
position: 'bottom',
display: false,
},
}
});
<h3 class="card-text"><canvas id="test"></canvas></h3>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>
Fiddle: https://jsfiddle.net/Leelenaleee/6Ltycqfh/7/

Chart js Datalabels styling

So I'm using the datalabels plugin for Chartjs on a bar chart. Each label has data for monthly and 7 days prior. I want the datalabels to be colored red for monthly black for 7 days prior. the color feature in options groups 2 bars together and displays 2 red 2 black 2 red 2 black in chunks as appose to individually.
Heres a link to the outputted chart. https://imgur.com/fqPesYz
import Chart from "chart.js";
import ChartDataLabels from "chartjs-plugin-datalabels";
require("../../Row4/Row4Charts/RoundedBars.js");
export default class Cancellations7daysChart extends Component {
Cancellations7daysChart = React.createRef();
componentDidMount() {
const Cancellations7daysChart = this.Cancellations7daysChart.current.getContext(
"2d"
);
new Chart(Cancellations7daysChart, {
type: "bar",
data: {
labels: ["DSL", "FTTC", "FTTP", "GFast"],
datasets: [
{
label: "Monthly",
data: [7, 19, 2, 0],
backgroundColor: [
"rgba(255, 9, 49)",
"rgba(255, 9, 49)",
"rgba(255, 9, 49)",
"rgba(255, 9, 49)"
],
borderColor: [
"rgba(0, 193, 189)",
"rgba(255, 9, 49)",
"rgba(0, 193, 189)",
"rgba(0, 193, 189)"
],
borderWidth: 1,
pointRadius: 4,
},
{
label: "7 days prior",
data: [2, 11, 5, 3],
backgroundColor: [
"rgba(208, 210, 211)",
"rgba(208, 210, 211)",
"rgba(208, 210, 211)",
"rgba(208, 210, 211)"
],
borderColor: [
"rgba(208, 210, 211)",
"rgba(208, 210, 211)",
"rgba(208, 210, 211)",
"rgba(208, 210, 211)"
],
borderWidth: 1,
pointRadius: 6,
}
]
},
options: {
maintainAspectRatio: true,
cornerRadius: 6,
cutoutPercentage: 65,
angleLines: {
display: true
},
tooltips: {
enabled: true
},
label: {
usePointStyle: true
},
legend: {
position: "bottom",
labels: {
filter: function (legendItem, Cancellations7daysChart) {
return !legendItem.text.includes("Monthly");
}
}
},
scales: {
ticks: {
maxTickLimit: 1,
max: 15,
display: false
},
//yaxes change
yAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
beginAtZero: true,
display: false
}
}
],
//xaxes change
xAxes: [
{
ticks: {
//Change font here
},
gridLines: {
drawBorder: false,
display: false,
scaleShowLabels: false
}
}
]
},
plugins: {
datalabels: {
color: ["red", "black", "red", "black", "red", "black", "red", "black"],
align: "end",
anchor: "end"
}
}
}
});
}
render() {
return (
<div>
<canvas
id="Cancellations7daysChart"
ref={this.Cancellations7daysChart}
width={360}
height={360}
/>
</div>
);
}
}

You need to make a function to change the colors depending their label:
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
color: function(context) {
var index = context.dataIndex;
var value = context.dataset.data[index];
var valueRed = context.dataset.label;
if(valueRed === 'Monthly') {
return value = 'red';
} else {
return value = '#000';
}
}
}
}
Here is a working example: Plunker example
More info about formatting in the plugin's page: Scriptable Options