I can't get the "markers" to show when I try the demo code for ApexCharts Column with Markers. Can't figure out why. Assuming it might be on their end. Need to add some more text here, but they provide demos for Angular, React, and Vue too, those seem to work (haven't tried the Vue one). I also checked the documentation, but could not find anything on it.
var options = {
series: [
{
name: "Actual",
data: [
{
x: "2011",
y: 1292,
goals: [
{
name: "Expected",
value: 1400,
strokeWidth: 5,
strokeColor: "#775DD0",
},
],
},
{
x: "2012",
y: 4432,
goals: [
{
name: "Expected",
value: 5400,
strokeWidth: 5,
strokeColor: "#775DD0",
},
],
},
{
x: "2013",
y: 5423,
goals: [
{
name: "Expected",
value: 5200,
strokeWidth: 5,
strokeColor: "#775DD0",
},
],
},
{
x: "2014",
y: 6653,
goals: [
{
name: "Expected",
value: 6500,
strokeWidth: 5,
strokeColor: "#775DD0",
},
],
},
{
x: "2015",
y: 8133,
goals: [
{
name: "Expected",
value: 6600,
strokeWidth: 5,
strokeColor: "#775DD0",
},
],
},
{
x: "2016",
y: 7132,
goals: [
{
name: "Expected",
value: 7500,
strokeWidth: 5,
strokeColor: "#775DD0",
},
],
},
{
x: "2017",
y: 7332,
goals: [
{
name: "Expected",
value: 8700,
strokeWidth: 5,
strokeColor: "#775DD0",
},
],
},
{
x: "2018",
y: 6553,
goals: [
{
name: "Expected",
value: 7300,
strokeWidth: 5,
strokeColor: "#775DD0",
},
],
},
],
},
],
chart: {
height: 350,
type: "bar",
},
plotOptions: {
bar: {
columnWidth: "60%",
},
},
colors: ["#00E396"],
dataLabels: {
enabled: false,
},
legend: {
show: true,
showForSingleSeries: true,
customLegendItems: ["Actual", "Expected"],
markers: {
fillColors: ["#00E396", "#775DD0"],
},
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
I think I was using an old installation and redoing that fixed it.
https://apexcharts.com/docs/installation/
Related
I would like the make a bar or column graph using daily data, and by default user should get annual representation of the data, then if the user clicks on a column of a specific year, they get a monthly break down of that year.
Please help
Thanks
Also add the desire plugin to it
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text:"Fortune 500 Companies by Country"
},
axisX:{
interval: 1
},
axisY2:{
interlacedColor: "rgba(1,77,101,.2)",
gridColor: "rgba(1,77,101,.1)",
title: "Number of Companies"
},
data: [{
type: "bar",
name: "companies",
axisYType: "secondary",
color: "#014D65",
dataPoints: [
{ y: 3, label: "January" },
{ y: 7, label: "Febrary" },
{ y: 5, label: "March" },
{ y: 9, label: "April" },
{ y: 7, label: "May" },
{ y: 7, label: "June" },
{ y: 9, label: "Jult" },
{ y: 8, label: "August" },
{ y: 11, label: "September" },
{ y: 15, label: "October" },
{ y: 12, label: "November" },
{ y: 15, label: "December" },
]
}]
});
chart.render();
}
</script>
I have been trying to modify the look of highcharts bars and I have managed to make the horizontal bar charts to look like progress bar charts. I followed this answer here in SO in order to do that. Right now, I am having two problems with this. The chart looks fine if I have one data series but here is how it looks if I have more than one series (there can be up to 3 series).
Therefore, I want to increase the margin between the labels (USA, Japan etc). Secondly, I would like to align the data labels (10, 40, 20 etc) towards the right of the chart, outside the bars. I think I need to write some javascript but I am not sure where to start or what to modify. Any help is appreciated.
Thanks.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: '#003755',
marginBottom: 60,
marginLeft: 80,
marginTop: 40,
marginRight: 140
},
colors: ['#0AA3DB', '#3AC6B1', '#000612'],
xAxis: [{
categories: ['USA', 'Japan', 'Canada', 'Brasil', 'China', 'Russia', 'UK', 'France', 'NA'],
labels: {
align: 'left',
x: 0,
y: -13,/* to be adjusted according to number of bars*/
style: {
fontSize: "0.875rem",
color: '#fff'
}
},
lineColor: 'transparent',
tickLength: 0
}],
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
labels: {
enabled: false
}
},
plotOptions: {
bar: {
dataLabels: {
allowOverlap: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
series: {
pointWidth: 8, //width of the column bars irrespective of the chart size
borderRadius: 5,
borderColor: 'transparent',
pointPadding: 0,
groupPadding: 0,
dataLabels: {
enabled: true,
format: '<b>{point.y:,.0f}</b>',
shared: true,
useHTML: true,
align: 'right'
}
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
yDecimals: 2
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<b>{point.name} - {point.y:,.0f}%</b>',
shared: true,
useHTML: true
},
series: [{
name: 'Current',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2005',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2023',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}]
});
https://jsfiddle.net/fbsveysb/
Use groupPaddingfor increasing the space between column groups.
The default value of dataLabels.align is left (point on the left side of the label) - this value should be used to position data labels outside of the bars.
Live working demo: https://jsfiddle.net/kkulig/w782cud7/
API references:
https://api.highcharts.com/highcharts/series.bar.dataLabels.align
https://api.highcharts.com/highcharts/series.bar.groupPadding
This may be one of the possible solution as I made in comment. It uses Scrollbars for any axis which shows how to have scroll in axis. It uses highstock.js file, it can be applied to regular Highcharts axes.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: '#003755',
marginBottom: 60,
marginLeft: 80,
marginTop: 40,
marginRight: 140,
events: {
load: function() {
var maxVal = 0;
for (var i = 0; i < this.series.length; i++) {
if (Math.max.apply(Math, this.series[i].yData) > maxVal) {
maxVal = Math.max.apply(Math, this.series[i].yData)
}
}
this.yAxis[0].setExtremes(0, maxVal + 10)
}
}
},
colors: ['#0AA3DB', '#3AC6B1', '#000612'],
xAxis: [{
categories: ['USA', 'Japan', 'Canada', 'Brasil', 'China', 'Russia', 'UK', 'France', 'NA'],
labels: {
align: 'left',
x: 0,
y: -20,
/* to be adjusted according to number of bars*/
style: {
fontSize: "0.875rem",
color: '#fff'
}
},
lineColor: 'transparent',
tickLength: 0,
min: 0,
max: 4,
scrollbar: {
enabled: true
},
}],
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
labels: {
enabled: false
}
},
plotOptions: {
bar: {
grouping: true,
pointPadding: 0,
dataLabels: {
allowOverlap: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
series: {
pointWidth: 8, //width of the column bars irrespective of the chart size
borderRadius: 5,
borderColor: 'transparent',
dataLabels: {
enabled: true,
//format: '{point.y:.1f}',
format: '<b>{point.y:,.0f}</b>',
shared: true,
useHTML: true,
overflow: 'none'
}
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
yDecimals: 2
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<b>{point.name} - {point.y:,.0f}%</b>',
shared: true,
useHTML: true
},
series: [{
name: 'Current',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2005',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2023',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}]
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container"></div>
I want to add another bar to a category. for example I want to put another bar in Category 1 keeping my structure. but I'm adding data without an array. I do not want to use this structure for example.
series: [{
name: 'bar1',
data: [1000, 950, 920, 0, 850],
color: "#FF0000"
}, {
name: 'bar2',
data: [800, 770, 750, 0, 730],
color: "#000000"
}, {
name: 'bar3',
data: [600, 540, 535, 500, 30],
color: "#00FF00"
}]
I must use this:
series: [{
"data": [{
"name": "number1",
"y": 10,
"color": "#FF0000"
}, {
"name": "number2",
"y": 42,
"color": "#FFFF00"
}, {
"name": "number3",
"y": 60
}]
}]
I do it because I want to customize the name of each bar. but I do not know
how to put another bar in the same category as show in the picture
this is my file...
http://jsfiddle.net/v51dxpLn/
I want every bar is assigned a different name and can put it in the same category. so far as I have my exampe I can only have one bar by category. I need to put n bars in a bar every category but still retains its different name.
Solution is to use multiple series, like here: http://jsfiddle.net/awe4abwk/1/
$('#container').highcharts({
chart: {
type: 'bar',
},
xAxis: {
categories: ['Cat 1', 'Cat 2', 'Cat 3']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [{
y: 10,
x: 0,
name: 'Bar 1'
}, {
y: 10,
x: 1,
name: 'Bar 2'
}, {
y: 10,
x: 2,
name: 'Bar 3'
}]
}, {
data: [{
y: 20,
x: 0,
name: 'Bar X'
}, {
y: 20,
x: 1,
name: 'Bar Y'
}, {
y: 20,
x: 2,
name: 'Bar Z'
}]
}]
});
I would like to know what is the best/essayist way to debug an HTML element in an Hover state when using a JS library (in my example: Highcharts).
This library is using CSS but also real-time manipulation of the DOM with JS.
For example, in the attached JS fiddle there is an Highcharts Scatter map and I would like to know what are ALL to properties that the tool-tip (that appears when you hover one of the dots) has.
I saw in similar questions here that in firebug I can simulate the CSS rules of an Hover state for an element, but I did not see any answer about how to debug when CSS and JS are been used together.
Is there any option of "stacking" the page in the hover state, so I could examine the entire state?
example jsFiddle
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: Euromonitor and OECD'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [
{ x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' },
{ x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' },
{ x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' },
{ x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' },
{ x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' },
{ x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' },
{ x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' },
{ x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' },
{ x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' },
{ x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' },
{ x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' },
{ x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' },
{ x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' },
{ x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' },
{ x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' }
]
}]
});
});
.highcharts-tooltip h3 {
margin: 0.3em 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
What you can do is open your site in Chrome, hit F12 which is the Web developer toolbar, then hover over the element you want to test.
Then select from the top right the plus sign next to the Thumbtack , select the thumbtack
Once that is done you can select what state you want
At that point you would write a css :hover to see the state occur. (copy and save frequently though).
I was trying to create a graph that represents the schedule of our Store using highcharts. With that, I use columnrange to a start and end time where the store is open.
But I'm stuck on how can I push those data using array and json.
Here's what I want to achieve. I made this mock-up with hard coded data;
JSFIDDLE: http://jsfiddle.net/rds_a/Lscqugbp/3/
code:
$(function () {
window.chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'columnrange',
inverted: false
},
title: {
text: "Store Schedule"
},
xAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Yesterday','Today']
},
yAxis: {
min: 0,
max: 24,
categories: ['01','02','03', '04','05', '06','07', '08', '09','10', '11', '12', '13', '14', '15','16','17', '18', '19','20', '21','22','23', '24'],
title: {
text: 'Time'
}
},
legend: {
enabled: true
},
plotOptions: {
columnrange: {
grouping: false
}
},
series: [{
name: 'Open',
stack: 'OnSite',
color: 'orange',
data: [{
x: 0,
low: 7,
high: 10
},{
x: 0,
low: 11,
high: 16
},{
x: 1,
low: 6,
high: 12
},{
x: 1,
low: 17,
high: 21
}]
},
{
name: 'Close',
stack: 'OnSite',
color: 'black',
data: [
{
x: 0,
low: 01,
high: 07
},{
x: 0,
low: 10,
high: 11
},
,{
x: 0,
low: 15,
high: 24
},
{
x: 1,
low: 1,
high: 7
},
{
x: 1,
low: 12,
high: 17
},
{
x: 1,
low: 21,
high: 24
}]
}]
});
});
While here's what I'am currently have;
JSFIDDLE: http://jsfiddle.net/rds_a/9P5fC/485/
code:
$(function () {
var jdata = {
"Open": {
"y": [4,8],
"name": "Open",
"n": [0]
},
"Closed": {
"y": [9,12],
"name": "Closed",
"n": [1]
}
};
var seriesArr = [];
$.each(jdata, function (key, data) {
var series = {
name: key,
data: []
};
$.each(data.y, function (index, value) {
series.data.push({
y: value
});
});
$.each(data.n, function (index, value) {
series.data[index].n = value;
});
seriesArr.push(series);
});
var options = {
chart: {
renderTo: 'container',
type: 'column',
inverted: false
},
title: {
text: 'Store Schedule'
},
xAxis: {
categories: ['Monday', 'Tuesday']
},
yAxis: {
min: 0,
max: 24,
categories: ['01','02','03', '04','05', '06','07', '08', '09','10', '11', '12', '13', '14', '15','16','17', '18', '19','20', '21','22','23', '24'],
title: {
text: 'Time'
}
},
legend: {
enabled: true
},
plotOptions: {
columnrange: {
stacking: 'percent'
}
},
series: seriesArr
};
var chart = new Highcharts.Chart(options);
});
Thanks in advance to those who can give their inputs.