I have several echarts in an application I develop. I'm using V4 of echarts (can't upgrade just yet) and following the documentation for tooltip usage as found here: https://echarts.apache.org/v4/en/option.html#tooltip All but my latest one are showing the tooltip just fine. I cannot see any difference between my new one and my old ones.
I have explicitly imported the proper modules as outlined in the answer to this question: Apache ECharts with Vue does not show Tooltip just like I did for my old ones.
I use vue files with the template on top, script in the middle, and css at the bottom. The chart is defined in the template thus:
<echarts
id="alertPie"
:options="option"
class="alertChart"
autoresize
/>
In my scripts section, I have these imports:
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
The "option" for the chart is a computed field defined thus:
computed: {
option () {
return {
backgroundColor: '#efefef',
textStyle: {
fontStyle: 'italic',
fontWeight: 'bold'
},
title: {
text: 'Alert Adoption',
subtext: 'Count by Alert',
left: 'center',
top: 10,
textStyle: {
color: '#ee0022',
textBorderColor: '#000000',
textBorderWidth: 2,
textShadowColor: 'rgba(0,0,0,0.5)',
textShadowBlur: 4,
fontWeight: 'bold',
textShadowOffsetX: 2,
textShadowOffsetY: 2,
fontSize: 28
},
subtextStyle: {
color: 'black'
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
// orient: 'vertical',
// top: 'middle',
bottom: 10,
left: 'center'
},
series: [
{
name: 'pie',
type: 'pie',
data: this.alertPieData,
radius: '40%',
center: ['50%', '40%'],
selectedMode: 'single',
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
animationDuration: 2000
}
}
}
The pie shows the data correctly. The title and legend both show correctly. Of the imported items, only the tooltip is not working.
Like I said, my other charts are built the same and tooltips work. What could I have missed? I've stared at this and compared to my working examples and don't see any differences (other than data sources and title/label changes).
Any ideas?
Data sample below:
[ { "name": "Acthar Gel Med Order Alert", "value": 10 },
{ "name": "Anticoagulation / Hemoglobin Alert", "value": 6 },
{ "name": "Anticoagulation or Dual Antiplatelet / Hemoglobin Alert", "value": 7 },
{ "name": "Berinert Alert", "value": 10 },
{ "name": "Blood Culture Identification Alert", "value": 13 },
{ "name": "Clostridium Difficile Alert", "value": 9 },
{ "name": "Clostridium Difficile Lab Order Alert", "value": 15 },
{ "name": "Controlled Substance - Pyxis Removal / Late Admin Alert", "value": 13 } ]
I have tried this using CDN it should work.
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/en/editor.html?c=pie-roseType
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts#5.3.2/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts#5.3.2/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl#2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat#latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts#5.3.2/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts#5.3.2/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts#{{version}}/dist/extension/bmap.min.js"></script>
-->
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
backgroundColor: '#efefef',
textStyle: {
fontStyle: 'italic',
fontWeight: 'bold'
},
title: {
text: 'Alert Adoption',
subtext: 'Count by Alert',
left: 'center',
top: 10,
textStyle: {
color: '#ee0022',
textBorderColor: '#000000',
textBorderWidth: 2,
textShadowColor: 'rgba(0,0,0,0.5)',
textShadowBlur: 4,
fontWeight: 'bold',
textShadowOffsetX: 2,
textShadowOffsetY: 2,
fontSize: 28
},
subtextStyle: {
color: 'black'
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
// orient: 'vertical',
// top: 'middle',
bottom: 10,
left: 'center'
},
series: [
{
name: 'pie',
type: 'pie',
data: [ { "name": "Acthar Gel Med Order Alert", "value": 10 },
{ "name": "Anticoagulation / Hemoglobin Alert", "value": 6 },
{ "name": "Anticoagulation or Dual Antiplatelet / Hemoglobin Alert", "value": 7 },
{ "name": "Berinert Alert", "value": 10 },
{ "name": "Blood Culture Identification Alert", "value": 13 },
{ "name": "Clostridium Difficile Alert", "value": 9 },
{ "name": "Clostridium Difficile Lab Order Alert", "value": 15 },
{ "name": "Controlled Substance - Pyxis Removal / Late Admin Alert", "value": 13 } ],
radius: '40%',
center: ['50%', '40%'],
selectedMode: 'single',
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
animationDuration: 2000
}
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
Related
Fairly straightforward, but I have a single bar on a barchart that I want to show by itself. I've hidden the axes and their ticks, but there is still all of that space there on the left and top//bottom of chart from the axes and the legend I am presuming.
Is there a way to remove this space without just putting negative margins on the element?
I've tried working with negative padding, but that doesn't work on the top and bottom of the chart.
I made a quick CodeSandbox to show my actual component
Any tips would be greatly appreciated!
Cheers!
Horizontal Stacked Bar Chart
<template>
<div style="width: 100%; height: 100%">
<canvas :id="id" width="100%" height="100%"></canvas>
</div>
</template>
<script>
import { defineComponent, onMounted } from "vue"
import Chart from "chart.js/auto"
import ChartDataLabels from "chartjs-plugin-datalabels"
export default defineComponent({
props: {
kind: {
/**
* #example: 'single', 'stacked'
*/
type: String,
default: "stacked",
},
color: {
type: String,
default: "rgba(255, 99, 132, 1)",
},
labels: {
type: Array,
default: () => ["S1", "S2", "S4", "S6"],
},
datasets: {
type: Array,
default: () => [
{
label: "va_value",
data: [80, 10, 60, 50],
backgroundColor: "#11DCB5",
borderColor: "transparent",
barThickness: 20,
minBarLength: 4,
// This is here to show SOMETHING even if the value is 0
},
{
label: "nva_value",
data: [20, 0, 40, 0],
backgroundColor: "#CA2F4B",
borderColor: "transparent",
barThickness: 20,
minBarLength: 4,
},
],
},
},
setup(props, context) {
const id = Math.random().toString()
onMounted(() => {
Chart.register(ChartDataLabels)
const ctx = document.getElementById(id)
const myChart = new Chart(ctx, {
type: "bar",
data: {
labels: props.labels,
datasets: props.datasets,
},
options: {
layout: {
padding: {
left: -20,
bottom: -20,
top: -20
}
},
plugins: {
legend: {
display: false,
},
datalabels: {
formatter: function (value) {
return props.kind === "stacked" ? `${value}s` : `${value}%`
},
color: "#fff",
anchor: "center",
align: "center",font: {
weight: "bold",
},
},
},
responsive: true,
maintainAspectRatio: false,
indexAxis: "y",
scales: {
y: {
beginAtZero: true,
stacked: true,
ticks: {
color: "#fff",
},
grid: {
drawBorder: false,
display: false,
},
},
x: {
display: props.kind === "stacked" ? true : false,
beginAtZero: true,
stacked: true,
ticks: {
color: "#fff",
},
grid: {
drawBorder: false,
display: false,
},
title: {
display: true,
text: props.kind === "stacked" ? "Step Time (s)" : "",
color: "#fff",
},
},
},
},
})
myChart
})
return { id }
},
})
</script>
<style lang=""></style>
This is because you set barThickness to 20 in your datasets. If you remove this it will show as you want:
https://codesandbox.io/s/modest-wave-60xui0
I have the following Chart Component:
<template>
<div class="gauge-chart">
<chart :options="options"></chart>
</div>
</template>
<script>
export default {
props: {
chartValue: { type: Number, required: true },
chartName: { type: String, required: true },
},
data: () => ({
options: {
series: [
{
type: "gauge",
startAngle: 180,
endAngle: 0,
min: 1,
max: 5,
splitNumber: 8,
axisLine: {
lineStyle: {
width: 6,
color: [
[0.25, "#7CFFB2"],
[0.5, "#58D9F9"],
[0.75, "#FDDD60"],
[1, "#FF6E76"],
],
},
},
pointer: {
icon: "arrow",
offsetCenter: [0, "-30%"],
itemStyle: {
color: "auto",
},
},
axisTick: {
length: 12,
lineStyle: {
color: "auto",
width: 1,
},
},
splitLine: {
length: 20,
lineStyle: {
color: "auto",
width: 5,
},
},
title: {
fontSize: 30,
},
data: [
{
value: this.chartValue,
name: this.chartName,
},
],
},
],
},
}),
};
</script>
As you can see I am tryng to inject chartValue and chartName props into options.series.data.value and options.series.data.name respectively.
The values for the properties are coming from
<GaugeChart chartName="Sleep" :chartValue="2" />
At the moment the values are hardcoded, but eventually they will be dynamic.
However it keep throwing the following error:
"TypeError: Cannot read property 'chartName' of undefined"
"TypeError: Cannot read property 'chartValue' of undefined"
I have done a colsole.log of both properties and they come up as "Sleep" and 2. I have also done a typeof on both property names and they both come up as String and Number, respectively.
Could somebody tell me where I am going wrong please?
Many thanks in advance.
You cannot use 'this' operator inside an arrow function so define your data section as a normal function
<script>
export default {
props: {
chartValue: { type: Number, required: true },
chartName: { type: String, required: true },
},
data() {
return {
options: {
series: [
{
type: "gauge",
startAngle: 180,
endAngle: 0,
min: 1,
max: 5,
splitNumber: 8,
axisLine: {
lineStyle: {
width: 6,
color: [
[0.25, "#7CFFB2"],
[0.5, "#58D9F9"],
[0.75, "#FDDD60"],
[1, "#FF6E76"],
],
},
},
pointer: {
icon: "arrow",
offsetCenter: [0, "-30%"],
itemStyle: {
color: "auto",
},
},
axisTick: {
length: 12,
lineStyle: {
color: "auto",
width: 1,
},
},
splitLine: {
length: 20,
lineStyle: {
color: "auto",
width: 5,
},
},
title: {
fontSize: 30,
},
data: [
{
value: this.chartValue,
name: this.chartName,
},
],
},
],
},
};
}
};
</script>
You should use the prop in following manner:
<GaugeChart chart-name="Sleep" chart-value="2" />
Documentation
HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase.
I've been researching for hours trying to figure out this issue. I use ChartJS and trying to build line chart. It seems i have no gap between my chart and its legend, and need to add more space between them.
It should be like this:
But i got this (see my code snippet)
Here's my code:
new Chart(document.getElementById("line-chart"), {
type: "line",
data: {
labels: ["Label1", "Label2", "Label3", "Label4"],
datasets: [
{
label: "A",
fill: false,
data: [10, 30, 60, 100],
borderWidth: 1,
backgroundColor: "red",
borderColor: "red",
},
{
label: "B",
fill: false,
data: [28, 80, 60, 60],
borderWidth: 1,
backgroundColor: "green",
borderColor: "green",
},
],
},
options: {
legend: {
align: "start",
position: "right",
labels: {
usePointStyle: true,
fontSize: 10,
},
},
elements: {
line: {
tension: 0,
},
},
responsive: true,
maintainAspectRatio: false,
},
});
canvas {
height: 35vh !important;
width: 90%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<head></head>
<body>
<canvas id="line-chart"></canvas>
</body>
Depending on where the legend is placed there are some quick fix options available. See this question
For your case and, more often than not, I would recommend generating your own html legend which will give you full control.
You can set this up in the options:
options: {
legend: {
display:false, //turn default legend off
},
legendCallback : legendBuilder, //link to your custom function returning html string
}
Define where your legend will go in the html:
<div id="chart-container">
<canvas id="line-chart"></canvas>
<div id="chart-legend"></div>
</div>
Then generate your legend:
var myLegend = document.getElementById("chart-legend");
myLegend.innerHTML = myChart.generateLegend();
working example
I am trying bar chart using Highcharts. In the below code we have xaxis categories like : ['Name1', 'Name2', 'Name3', 'Name4' ].
Firstly, I am using the below highcharts code in react native to develop iOS app.
I am trying to place the Name on each individual bar's in the graph(bar chart), which is working but when the name text from the categories array is v.large then the width of the title is not getting increased & the text is coming in multiple lines with the minimum width. If the name is v.large then only we are getting dotted text on the graph.
Can we increase the width of the title? and If so how can we increase the width within the iPhone's width.
chart: {
type: 'bar',
reflow: true,
marginRight: 30,
},
credits: {
enabled: false
},
title: {
align: "left",
text: "A comparison of the business’ digital health with that of the competitors.",
backgroundColor:'green',
style: {
color: '#808080',
fontWeight: '400',
fontSize: '13px',
}
},
xAxis: {
categories: ['Name1', 'Name2', 'Name3', 'Name4' ],
title: {
align: "left",
},
scrollbar: {
enabled: false
},
labels: {
x: 25,
y: -22,
align: 'left',
useHTML: true,
style: {
fontSize: '13px',
fontFamily: 'Open Sans',
color: '#464646',
backgroundColor: 'green',
},
},
},
yAxis: {
gridLineColor: "transparent",
stackLabels: {
qTotals: [91,99,85,99],
enabled: true,
useHTML: true,
style: {
fontWeight: "bold",
},
formatter: function () {
return this.options.qTotals[this.x];
},
},
tickInterval: 20,
labels: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
align: 'center',
enabled: false,
crop: false,
overflow: 'none',
verticalAlign: 'top',
y: -50,
style: {
fontWeight: '300',
color: '#808080',
fontSize: '30px',
}
},
pointWidth: 25,
borderWidth: 0,
pointPadding: 10,
stacking: "normal",
states: {
hover: {
enabled: false
}
},
//cursor: 'pointer',
point: {
events: {
click: function (event) {
}
}
}
}
},
series: [
{
name: "",
data: [3, 1, 15, 1],
color: "#f5f6f8",
dataLabels: {
enabled: false
},
},
{
name: "",
color: "#ff0000",
data: [{ y: 97, color: "#0f875a" }, { y: 99, color: "#0f875a" }, { y: 85, color: "#0f875a" }, { y: 99, color: "#0f875a" }]
}
],
}
For a sample I have taken a graph i.e bar chart from Highcharts, In the link jsfiddle.net/psre6Lj9/1 we have some fruits names, where 'Apples' width is not sufficient and the text is being displayed in multiple lines. I want to increase the width of the title. How can i do that.
To increase the width of the labels, set the right style:
xAxis: {
categories: ['Apples Apples Apples Apples Apples Apples Apples ', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
labels: {
x: 25,
y: -22,
align: 'left',
style: {
width: '300px'
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/went9xmf/
API: https://api.highcharts.com/highcharts/xAxis.labels.style
Im attempting to add this code to my website, built with sandvox, via the insert 'Raw HTML' function. Once I add the code, I simply see a blank box on my site. Im hoping that there is some way I can get a bit of help. Thank you for any help.
<html>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Prevalence of Performance Enhancing Drug Use By Sport'
},
subtitle: {
text: 'Source: getfast'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Prevalence (%)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'PED Prevalence: <b>{point.y:.1f} %</b>'
},
series: [{
name: 'Prevalence',
data: [
['WADA All Pros', 2],
['Child Athletes', 4],
['HS Football', 6.3],
['HS Seniors All Sports', 6.6],
['Amatuer Weight-lifters', 8.2],
['American Football', 9],
['Baseball', 9.4],
['Research Estimate All Pros', 10.2],
['Top 100 Sprinters (running)', 40],
['Professional Bodybuilders', 54],
['Tour de France Winners', 79],
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: -15,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
}]
});
});
</hmtl>
place jQuery script before highcharts js, and don't forget close your <script> tag
<html>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Prevalence of Performance Enhancing Drug Use By Sport'
},
subtitle: {
text: 'Source: getfast'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Prevalence (%)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'PED Prevalence: <b>{point.y:.1f} %</b>'
},
series: [{
name: 'Prevalence',
data: [
['WADA All Pros', 2],
['Child Athletes', 4],
['HS Football', 6.3],
['HS Seniors All Sports', 6.6],
['Amatuer Weight-lifters', 8.2],
['American Football', 9],
['Baseball', 9.4],
['Research Estimate All Pros', 10.2],
['Top 100 Sprinters (running)', 40],
['Professional Bodybuilders', 54],
['Tour de France Winners', 79],
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: -15,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
}]
});
});
</script>
</hmtl>
You are missing a closing </script> tag at the end of your Highcharts script. Adding that closing tag and ensuring that jQuery is loaded before loading the Highcharts script should work great.
So it should be:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
<!-- your Highcharts script here... -->
</script>
</head>
<body>
<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>
</body>
</html>
A working example can be seen here.