Echart tooltip settings - javascript

I am using echart( https://v-charts.js.org/#/en/ring ) in my vue js application. and i am trying to customize tooltip in ring chart. but i am not able to get. i want to display my own json data in tooltip when mouse over in the particular color.
Html code:
<ve-ring :data="OptionRingChart" :settings="chartSettings"></ve-ring>
Javascript code:
chartSettings: {
itemStyle: {
normal: {
color: function (params) {
var colorList = [
'red', 'lightgreen'
];
return colorList[params.dataIndex]
}
}
},
label: {
normal: {
show: false
}
},
tooltip: {
show: true,
trigger: 'item',
position: ['35%', '32%'],
backgroundColor: 'implements',
textStyle: {
color: '#000000',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 55,
},
},
},
OptionRingChart: {
color: ['green', 'red'],
columns: ['name', 'test'],
rows: [
{ 'name': 'D', 'test': 1 },
{ 'name': 'C', 'test': 2 }
],
},


You will want to utilize the tooltip.formatter
var option = {
tooltip: {
show: true,
trigger: 'item',
formatter: function (a) {
my_json_data = get_and_format_my_data()
return `${my_json_data}`
}
}
}

Related

Redraw sunburst Chart after update the series

I am trying to update the Sunburst chart series on the change of dropdown. But my chart data series is not updating. Right now When I am trying to update the chart just the tooltip is getting updated chart is not redrawing.
Below is my code and JS fiddle demo URL:
https://jsfiddle.net/n0y87osa/6/
var options = {
chart: {
height: '70%',
// type: 'sunburst'
renderTo: 'container'
},
plotOptions: {
sunburst: {}
},
series: [{
type: "sunburst",
name: 'Root',
data: data,
point:{
events:{
click: function (event) {
alert(this.name);
}
}
},
allowDrillToNode: true,
cursor: 'pointer',
dataLabels: {
style: {
fontSize: "12px",
//color: "#515151",
fontWeight: 'normal !important',
fontFamily: "'Open Sans', sans-serif",
textOutline : 0,
color: '#fff'
},
},
levels: [{
level: 1,
levelIsConstant: false,
dataLabels: {
filter: {
property: 'outerArcLength',
operator: '>',
value: 64
},
},
},{
level: 2,
dataLabels: {
rotationMode: 'parallel'
}
}, {
level: 3,
colorVariation: {
key: 'brightness',
to: -0.4 //Tells the gradation extent
}
}]
}],
tooltip: {
shared: true,
}
};
var chart = new Highcharts.Chart(options);
$('#type_').on('change',function(){
alert(this.value);
chart.series[0].setData(data2);
chart.redraw()
});

Issue reproduced in a minimal live example: https://jsfiddle.net/BlackLabel/qrhpsbx5/
Error in console: Uncaught TypeError: Cannot read properties of undefined (reading 'x')
The problem occurs because you are incorrectly using the index property in your data. Highcharts uses index from data also to calculate the length of data, which is causing incompatibilities during data updates.
As a solution, you can change the name of the property:
var data2 = [{
id: '0.0',
parent: '',
name: 'KSE ALL',
customIndex: 32819
}, ...];
or store it in custom:
var data2 = [{
id: '0.0',
parent: '',
name: 'KSE ALL',
custom: {
index: 32819
}
}, ...];
Live demo: https://jsfiddle.net/BlackLabel/xnespquj/
API Reference: https://api.highcharts.com/highcharts/series.sunburst.data.custom

I did destroy the chart and redraw it with updated data series.
var chart;
function sunBurstChart (data1){
var options = {
chart: {
height: '70%',
// type: 'sunburst'
renderTo: 'container'
},
series: [{
type: "sunburst",
name: 'Root',
data: data1,
point:{
events:{
click: function (event) {
alert(this.name);
}
}
},
allowDrillToNode: true,
cursor: 'pointer',
dataLabels: {
/**
* A custom formatter that returns the name only if the inner arc
* is longer than a certain pixel size, so the shape has place for
* the label.
*/
style: {
fontSize: "12px",
//color: "#515151",
fontWeight: 'normal !important',
fontFamily: "'Open Sans', sans-serif",
textOutline : 0,
color: '#fff'
},
},
levels: [{
level: 1,
levelIsConstant: false,
dataLabels: {
filter: {
property: 'outerArcLength',
operator: '>',
value: 64
},
style: {
fontSize: "12px",
//color: "#515151",
fontWeight: 'normal !important',
fontFamily: "'Open Sans', sans-serif",
textShadow: false ,
backgroundColor: 'rgba(255, 255, 255, 1)',
},
},
},{
level: 2,
dataLabels: {
rotationMode: 'parallel'
}
}, {
level: 3,
colorVariation: {
key: 'brightness',
to: -0.4 //Tells the gradation extent
}
}]
}],
chart = new Highcharts.Chart(options);
}
sunBurstChart(data);
$('#type_').on('change',function(){
// alert(this.value);
chart.destroy();
sunBurstChart(data2);
chart.redraw();
});

chartjs-plugin-datalabels not showing on stacked horizontal bar

I'm trying to make a simple horizontal stacked bar chart and add labels to it. I'm not sure what I'm doing wrong here, any input would be appreciated.
I can make it work by downgrading to a much lower version of chart.js and the datalabel plugin.
Here is a jsfiddle:
https://jsfiddle.net/chrispret/szLgyu2j/24/
And some test code...
const testData = {
set1: '4',
set2: '3',
set3: '1',
set4: '3',
};
const data = {
labels: ["test"],
datasets: [
{
label: 'set1',
data: [testData.set1],
backgroundColor: 'red',
datalabels: {
anchor: 'center',
align: 'center',
}
},
{
label: 'set2',
data: [testData.set2],
backgroundColor: 'blue',
datalabels: {
anchor: 'center',
align: 'center',
}
},
{
label: 'set3',
data: [testData.set3],
backgroundColor: 'green',
datalabels: {
anchor: 'center',
align: 'center',
}
},
{
label: 'set4',
data: [testData.set4],
backgroundColor: 'gray',
datalabels: {
anchor: 'center',
align: 'center',
}
}
]
};
const config = {
type: 'bar',
data: data,
options: {
aspectRatio: 15 / 3,
indexAxis: 'y',
elements: {
bar: {
borderWidth: 2,
}
},
responsive: true,
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
},
plugins: {
datalabels: {
color: 'white',
font: {
weight: 'bold'
},
formatter: Math.round
},
legend: {
position: 'right',
},
title: {
display: true,
text: 'Chart.js Horizontal Bar Chart'
},
}
},
};
const myChart = new Chart(
document.getElementById('chartDemo'),
config
);

Since version 1.x, the chartjs-plugin-datalabels plugin no longer registers itself automatically. It must be manually registered either globally or locally as described here.
Therefore, to make it work, you could add the following line to your code prior to create the chart.
Chart.register(ChartDataLabels);
Please take a look at your amended code and see how it works.
const testData = {
set1: '4',
set2: '3',
set3: '1',
set4: '3',
};
const data = {
labels: ["test"],
datasets: [{
label: 'set1',
data: [testData.set1],
backgroundColor: 'red'
},
{
label: 'set2',
data: [testData.set2],
backgroundColor: 'blue'
},
{
label: 'set3',
data: [testData.set3],
backgroundColor: 'green',
datalabels: {
anchor: 'center',
align: 'center'
}
},
{
label: 'set4',
data: [testData.set4],
backgroundColor: 'gray'
}
]
};
const config = {
type: 'bar',
data: data,
options: {
aspectRatio: 15 / 3,
indexAxis: 'y',
elements: {
bar: {
borderWidth: 2
}
},
responsive: true,
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
},
plugins: {
datalabels: {
anchor: 'center',
align: 'center',
color: 'white',
font: {
weight: 'bold'
},
formatter: Math.round
},
legend: {
position: 'right'
},
title: {
display: true,
text: 'Chart.js Horizontal Bar Chart'
},
}
},
};
Chart.register(ChartDataLabels);
const myChart = new Chart(
document.getElementById('chartDemo'),
config
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script>
<canvas id="chartDemo"></canvas>

Add the labels to the labels array.
const data = {
labels: ["hrZone1","hrZone2","hrZone3","hrZone4"],
datasets: [
{
label: 'peak',
data: [hrData.peak,0,0,0],
backgroundColor: 'red'
},
{
label: 'cardio',
data: [0,hrData.cardio,0,0],
backgroundColor: 'blue'
},
{
label: 'fatBurn',
data: [0,0,hrData.fatBurn,0],
backgroundColor: 'green'
},
{
label: 'under',
data: [0,0,0,hrData.under],
backgroundColor: 'gray'
}
]
};

Change color of single bar in apex chart

I've some trouble making changes in the bar of color in the apex chart. The chart is a mixed chart (Line/Bar).
I want to change a single bar color.
I've tried the solution is that is to added a fillColor into the series.data as per the apex chart documents but it does not work.
Chart Snap
enter image description here
Here is my code.
where
response.device.data.values AND response.flowmeter.values is a array of values.
if (newChart !== null) {
newChart.destroy();
}
var options = {
chart: {
height: 350,
stacked: false,
height: '400',
toolbar: {
tools: {
download: true,
selection: false,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: false,
customIcons: []
}
}
},
dataLabels: {
enabled: false
},
stroke: {
width: [2, 1],
curve: 'stepline'
},
yaxis: [
{
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#008FFB'
},
labels: {
style: {
color: '#008FFB',
}
},
title: {
text: "<?=_('Device(s)')?> (m3)",
style: {
color: '#008FFB'
}
},
tooltip: {
enabled: true
}
},
{
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#00E396'
},
labels: {
style: {
color: '#00E396',
}
},
title: {
text: "<?=_('Flowmeter(s)')?> (m3)",
style: {
color: '#00E396',
}
}
},
],
tooltip: {
followCursor: true,
},
legend: {
horizontalAlign: 'center',
offsetX: 40
},
zoom: {
enabled: false
},
xaxis: {
categories: response.device.data.labels,
labels: {
style: {
fontSize: '10px'
}
}
},
series: [
{
name: '<?=_('Device(s)')?>',
type: 'line',
data: response.device.data.values
},
{
name: '<?=_('Flowmeter(s)')?>',
type: 'bar',
data: response.flowmeter.values
}
],
};
newChart = new ApexCharts(document.querySelector("#new-chart"), options);
newChart.render();

You can set color prop in the object of the series.
Somethings like that:
series: [
{
name: '<?=_('Device(s)')?>',
type: 'line',
color: "00FA9A",
data: response.device.data.values
},
{
name: '<?=_('Flowmeter(s)')?>',
type: 'bar',
color: "#F44336",
data: response.flowmeter.values
}
],

You could probably make use of passing a function to the fill property. Check this link: https://apexcharts.com/docs/options/fill/. You can also customize based on the series index.

colors: [function({ value, seriesIndex, w }) {
return colors(value)
}],
function colors(id) {
var colors = [
"#33b2df",
"#546E7A",
"#d4526e",
"#13d8aa",
"#A5978B",
"#2b908f",
"#f9a3a4",
"#90ee7e",
"#f48024",
"#69d2e7"
];
return colors[id] ?? '#33b2df';
}

eCharts bar3D one color by step yAxis3D

I try without success to define a single color for each step yAxis3D
whatever the value. I took the following example: https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar3d-punch-card&gl=1
series: [{
type: 'bar3D',
data: data.map(function (item) {
return {
value: [item[1], item[0], item[2]],
itemStyle: { color: 'green' } // not working
}
}),
itemStyle: {
opacity: 1,
},
label: {
textStyle: {
fontSize: 16,
borderWidth: 1
}
},
emphasis: {
label: {
normal: {
show: false,
},
textStyle: {
fontSize: 20,
color: '#900'
}
},
}
}]

Highcharts: Tooltip on Y-Axis Labels

Trying to show description about y-axis labels as tooltip.
Is it possible to show corresponding tooltips on y-axis labels?
Here is the Fiddle where I am trying to add tooltip to y-axis lables
Code:
$(function(){
var chart1;
$(document).ready(function(){
var options = {
colors: ["#3ACB35", "#DE3A15", "#FF9A00", "#00B8F1"],
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: 'black',
borderColor: 'black',
borderWidth: 0,
className: 'dark-container',
plotBackgroundColor: 'black',
plotBorderColor: '#000000',
plotBorderWidth: 0
},
credits: {
enabled: false
},
title: {
text: 'Count Per Category',
style: {
color: 'white',
font: 'normal 22px "Segoe UI"'
},
align: 'left'
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
style: {
color: '#F0F0F0'
}
},
categories: {
enabled: 'true'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0,
itemStyle: {
font: '9pt Segoe UI',
color: 'white'
},
itemHoverStyle: {
color: 'grey'
}
},
xAxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
tickInterval: 1,
labels: {
enabled: true,
style: {
color: 'white'
}
},
title: {
enabled: false
},
gridLineColor: '#222222'
},
yAxis: {
title:
{
enabled: true,
text: "Document Count",
style: {
fontWeight: 'normal',
color: 'white'
}
},
labels: {
style: {
color: 'white'
}
},
gridLineColor: '#222222'
},
exporting: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
cursor: 'pointer'
}
},
series: []
};
options.series = [{
data: [3, 4, 4, 3, 9]
}];
chart1 = new Highcharts.Chart(options);
});
})
For each category, I have a tooltip like:
cat1: descrption1
cat2: descrption2
cat3: descrption3
cat4: descrption4
When mouse is hovered on "cat1", "description1" need to be shown as tooltip.Somewhat like below:

Use formatter with HTML enabled for labels: http://jsfiddle.net/W5wag/2/
xAxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
tickInterval: 1,
labels: {
enabled: true,
formatter: function() {
return '<span title="My custom title">' + this.value + '</span>';
},
useHTML: true,
style: {
color: 'white'
}
}
},
Of course you need store somewhere reference cat1 <-> description1 to feed span title with description.

Extending Paweł Fus' solution I define the label and title text by delimiting the values for categories using ' - '. The value can then be split into an array by the formatter to display the first array value as the label and the second array value as the title text: http://jsfiddle.net/wqpckxL7/
xAxis: {
categories: ['cat1 - the first and best category',
'cat2 - this category is less popular',
'cat3',
'cat4',
'cat5'],
tickInterval: 1,
labels: {
enabled: true,
formatter: function() {
// split using -
var values = this.value.split(" - ");
// check we have more than 1 value
if (values.length > 1) {
// use first item in the array as the displayed label and the second for the title text
return '<span title="' + values[1] + '">' + values[0] + '</span>';
} else {
// if only one value then format as normal
return this.value;
}
},
useHTML: true,
style: {
color: 'white'
}
},
}

Add pointFormat property to your tooltip object as:
tooltip: {
.....,
.....,
pointFormat: '<b>{point.y}</b>',
}
DEMO Link:

Categories