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 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>
Need help with chart js
ACTUALLY, I'M USING VUE-CHARTJS BUT IT'S JUST A WRAPPER
in the line chart on the left side, the number is increasing by 5(0, 5, 10, 15, etc) I want it to increase by 10 and also decrease the height of the chart so the aspect ratio is something like 16/9
also is it possible to make the left number say 5k+, 10k+, 15k+ instead of just 5, 10, 15
here's my code for the chart
<script>
import { Line } from 'vue-chartjs'
export default {
extends: Line,
data: () => ({
chartdata: {
labels: ['January', 'February', 'March', 'April', 'May','Jun'],
datasets: [
{
data: [12, 20, 27, 22, 14, 10],
borderColor: "#135193",
pointBackgroundColor: "#135193",
pointBorderColor: "#135193",
backgroundColor: 'rgba(255, 255, 255, 0)'
},
{
data: [3, 12, 17, 20, 30, 40],
borderColor: "#FF8811",
pointBackgroundColor: "#FF8811",
pointBorderColor: "#FF8811",
backgroundColor: 'rgba(255, 255, 255, 0)'
}
]
},
options: {
responsive: true,
legend: {
display: false
}
}
}),
mounted () {
this.renderChart(this.chartdata, this.options)
}
}
</script>
Yes, you can just use CSS to set the dimensions of the canvas and set maintainAspectRatio to false in the options, for the ticks you can use the tick callback:
const labels = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];
const options = {
type: 'line',
data: {
labels,
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'red',
backgroundColor: 'pink'
}]
},
options: {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
callback: (val) => (`${val}K`)
}
}]
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas {
max-height: 180px;
max-width: 320px;
}
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
Okay it turns out its as simple as wrapping the chart with a container and set height of that container as needed
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.