I'm trying to create a candlestick chart with apexcharts, and everything seems to work fine, except that the yaxis is showing up with a very faint color that I can barely see. I can tell that it's showing up because I can update the fontsize and see it, but for some reason the color won't update. Here is my config:
export const chartOptions = {
chart: {
animations: { enabled: false },
toolbar: { show: false },
width: '100px'
},
tooltip: {
enabled: false,
theme: false,
style: {
fontSize: '12px',
fontFamily: undefined
},
x: {
show: false,
format: 'dd MMM',
formatter: undefined,
},
y: {
show: true,
title: 'price'
},
marker: {
show: false,
},
items: {
display: 'flex',
},
fixed: {
enabled: false,
position: 'topRight',
offsetX: 0,
offsetY: 0,
},
},
xaxis: {
type: 'datetime',
labels: {
show: true,
style: {
colors: '#fff',
fontSize: '8px',
cssClass: 'apexcharts-xaxis-label',
},
},
},
yaxis: {
labels: {
show: true,
minWidth: 0,
maxWidth: 160,
style: {
color: '#fff',
fontSize: '8px',
cssClass: 'apexcharts-yaxis-label',
},
offsetX: 0,
offsetY: 0,
rotate: 0,
}
}
}
Here is what I see:
Any ideas why this isn't showing up as white as specified? I'd like to be able to show the yaxis values.
The issue was the version. I did the following:
npm uninstall apexcharts
npm i apexcharts#3.6.3
--restarted npm
npm run start
Then it worked!
Related
I would like to get rid of the small dot in my tooltip display. I am using High-charts. I Can you please help in modifying this feature, here is my code:
Highcharts.getJSON(
'https://code.highcharts.com/mapdata/custom/world.topo.json',
topology => {
const chart = Highcharts.mapChart('container', {
chart: {
map: topology
},
title: {
text: ''
},
legend: {
enabled: false,
align: 'center',
verticalAlign: 'bottom',
itemStyle: {
fontWeight: 'bold',
fontSize: '20px'
}
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true,
buttonOptions: {
align: 'right',
verticalAlign: 'bottom'
}
},
mapView: {
maxZoom: 30,
projection: {
name: 'Orthographic',
rotation: [60, -30]
}
},
colorAxis: {
min: 0,
max: 100,
text: '',
stops: [[0, 'darkgrey', ''], [0, '#5ce1e6', '{{question['answer1']}}'], [0.49, '#c9f5f7', ''], [.50, '#aee0a0', ''], [.51, '#fff4c8', ''], [1, '#ffde59', '{{question['answer2']}}']],
title: {
text: '',
},
},
credits: {
enabled: false
},
tooltip: {
useHTML: true,
pointFormat: '{point.name} <br> <div style="display: inline-block;" class="square-answer1-globe"></div>{{question["answer1"]}}: {point.value1}% <br> <div style="display: inline-block;" class="square-answer2-globe"></div>{{question["answer2"]}}: {point.value2}%',
backgroundColor: 'black',
style: {
color: 'white'
},
},
plotOptions: {
series: {
animation: {
duration: 750
},
clip: false
}
},
mapline: {
color: Highcharts.getOptions().colors[0]
},
series: [{
name: 'Graticule',
id: 'graticule',
type: 'mapline',
data: getGraticule(),
nullColor: 'lightgrey',
color: 'lightgrey',
accessibility: {
enabled: false
},
enableMouseTracking: false
},
{
data,
joinBy: 'name',
name: '',
states: {
hover: {
color: '',
borderColor: '#000000'
}
},
accessibility: {
exposeAsGroupOnly: true
}
}]
});
Here is an image of what is displayed: enter image description here
I want to get rid of the little dot in the top left of the tooltip box. I have been trying everything and it always seems to appear there. I have tried adding in "Marker: false", but maybe I am not inputting it in the correct spot (not sure if this is the correct code).
You can use formatter option for the tooltip, something like this, but add your values:
tooltip: {
formatter: function(tooltip) {
return `${question1}: <b>${percentage1}</b><br/>`
}
},
Here is documentation about it: https://api.highcharts.com/highcharts/tooltip.formatter
I’m working with Tailwind.css in my Django templates, but for a while, I’m trying to reproduce something that requires JavaScript.
<div id="chart">
</div>
<script>
var options = {
series: [76, 67, 61, 90],
chart: {
height: 390,
type: 'radialBar',
},
plotOptions: {
radialBar: {
offsetY: 0,
startAngle: 0,
endAngle: 270,
hollow: {
margin: 5,
size: '30%',
background: 'transparent',
image: undefined,
},
dataLabels: {
name: {
show: false,
},
value: {
show: false,
}
}
}
},
colors: ['#1ab7ea', '#0084ff', '#39539E', '#0077B5'],
labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'],
legend: {
show: true,
floating: true,
fontSize: '16px',
position: 'left',
offsetX: 160,
offsetY: 15,
labels: {
useSeriesColors: true,
},
markers: {
size: 0
},
formatter: function(seriesName, opts) {
return seriesName + ": " + opts.w.globals.series[opts.seriesIndex]
},
itemMargin: {
vertical: 3
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
show: false
}
}
}]
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
As much as you can see, I created this script in the HTML template file, but my div is invisible on the page when I render and it is also in my developer tools, which means that is there, but it does not appear.
I’m expecting to render this code, which is a radial chart bar, in my HTML.
I am trying to change ApexChart tooltip background colors but i couldn't do it.
They aren't same with the series colors. I tried set fillSeriesColor to true but it didn't worked, i don't know why.
Also I couldn't find the default colors to change them from css file, there is so confusing. Something must be going wrong.
My donut option codes are below, please help.. :)
var options = {
colors: ['#3699FF', '#DEF2EB', '#19C5BD', '#FEE7DD', '#FEA800'],
series: time,
labels: name,
chart: {
width: 350,
height: 280,
type: 'donut',
},
cutoutPercentage: 75,
responsive: !0,
maintainAspectRatio: !1,
cutout: "75%",
title: {
display: !1
},
fill: {
colors: ['#3699FF', '#DEF2EB', '#19C5BD', '#FEE7DD', '#FEA800']
},
animation: {
animateScale: !0,
animateRotate: !0
},
tooltip: {
fillSeriesColor: true,
x: {
fillSeriesColor: true
},
y: {
fillSeriesColor: true
}
},
dataLabels: {
enabled: false
},
legend: {
show: false
},
plugins: {
legend: {
display: !1
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
width: 0,
dashArray: 0,
},
plotOptions: {
pie: {
donut: {
size: "85%",
labels: {
show: true,
name: {
color: "#000000",
show: true
},
value: {
color: "#000000",
show: true
},
total: {
fontSize: "12px",
color: "#000000",
show: true,
label: 'testing'
}
}
}
}
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 350
},
legend: {
position: 'bottom'
}
}
}]
};
I'm using apexcharts with vue (vue-apexcharts 1.6.1) and making horizontal barchart for UHD resolution. The apexcharts inner is overflowing the chart width which is 100%.
Here is the template code:
<template>
<div>
<apexchart height="820" type="bar" :options="options" :series="series"></apexchart>
</div>
</template>
And here is the chart options:
options() {
return {
chart: {
type: 'bar',
width: "100%",
height: 820,
toolbar: {
show: false
}
},
legend: {
show: false
},
xaxis: {
categories: this.categoryData,
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
show: false
}
},
yaxis: {
opposite: true,
labels: {
style: {
colors: ["#BEBFCB"],
fontSize: "40px"
}
}
},
fill: {
colors: ["#0E5CAD", "#EA5455", "#0396FF", "#7367F0", "#D939CD"],
type: "gradient",
gradient: {
shade: "light",
gradientToColors: [
"#79f1a4",
"#feb692",
"#abdcff",
"#ce9ffc",
"#f6ceec"
],
shadeIntensity: 1,
type: "diagonal1",
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100]
}
},
plotOptions: {
bar: {
horizontal: true,
distributed: true,
borderRadius: 10,
barHeight: "70%",
colors: {
ranges: [
{
from: 0,
to: 0,
color: "pink"
}
],
backgroundBarColors: "#272A52",
backgroundBarRadius: 10
}
}
},
dataLabels: {
enabled: false
},
tooltip: {
enabled: false
},
responsive: [
{
breakpoint: 3199,
options: {
chart: {
height: 300
},
yaxis: {
opposite: true,
labels: {
style: {
colors: ["#BEBFCB"],
fontsize: "14px"
}
}
},
plotOptions: {
bar: {
borderRadius: 4,
colors: {
backgroundBarRadius: 4
}
}
}
}
}
]
};
}
Here's the output of above code:
Output of above code
Output of above code with dev tools
Expected behavior:
Expected behavior design
How can I adjust the chart so that my site matches the design? Right now the font-size of label is 40px in UHD resolution.
Thanks
P.S. I'm not using flex in any ancestor elements.
I solved this issue by giving maxWidth to y-axis label and by manipulating my x-axis categories to be in multiline.
After fix image
yaxis: {
opposite: true,
labels: {
maxWidth: "auto",
style: {
colors: ["#BEBFCB"],
fontSize: "40px"
}
}
}
I tried to put the legend title with its color code at the bottom of the chart before a load of data.
Here is the code I tried. Kindly let me know the corrections to be made.
var options = {
series: [],
chart: {
height: 350,
type: 'line',
toolbar: {
show: true
},
zoom: {
enabled: false,
}
},
legend: {
show:true,
position: 'bottom',
floating: true,
verticalAlign: 'bottom',
align:'center'
},
tooltip: {
shared: true
},
colors: ['#77B6EA', '#545454'],
dataLabels: {
enabled: true
},
Here is the image of display
The crux of the problem is: how does ApexCharts know what to show in the legend if you don't provide any data.
Assuming you know what the series will be called, you can still provide empty series even if you have no data:
series: [
{
name: "Series 1",
data: []
}
]
If you have only one series, you'll also need to change the value for showForSingleSeries from the default false to true:
legend: {
showForSingleSeries: true
}
On a side note, you can also drop the show and position legend attributes as they're the same as the defaults. You might also want to remove the verticalAlign and align attributes as they're not included in the documentation.
You should check out their api.
https://apexcharts.com/docs/options/legend/
const options = {
...
legend: {
show: true,
position: 'bottom',
},
labels: ['value 1', 'value 2', 'value 3', 'value 4']
...
}
const data = []
legend: {
show: true,
showForSingleSeries: false,
showForNullSeries: true,
showForZeroSeries: true,
position: 'bottom',
horizontalAlign: 'center',
floating: false,
fontSize: '14px',
fontFamily: 'Helvetica, Arial',
fontWeight: 400,
formatter: undefined,
inverseOrder: false,
width: undefined,
height: undefined,
tooltipHoverFormatter: undefined,
customLegendItems: [],
offsetX: 0,
offsetY: 0,
labels: {
colors: undefined, useSeriesColors: false
}
,
markers: {
width: 12, height: 12, strokeWidth: 0, strokeColor: '#fff', fillColors: undefined, radius: 12, customHTML: undefined, onClick: undefined, offsetX: 0, offsetY: 0
}
,
itemMargin: {
horizontal: 5, vertical: 0
}
,
onItemClick: {
toggleDataSeries: true
}
,
onItemHover: {
highlightDataSeries: true
}
,
}