I am using ng2-charts to get a bubble chart with this type mentioned in the picture. I have installed chart-js plugins also but I am not capable of getting the numbers inside the bubbles.
Expectation : Inside Bubble I want to write number such as 1, 2, 3 like that
Here is my html ionic code
<div style="display: block">
<canvas baseChart
[datasets]="bubbleChartData"
[options]="bubbleChartOptions"
[colors]="bubbleChartColors"
[legend]="bubbleChartLegend"
[chartType]="bubbleChartType">
</canvas>
</div>
Also here is my typescript code describing ng2-charts
export class DashboardPage {
bubbleChartOptions: ChartOptions = {
responsive: true,
scales: {
xAxes: [
{
display: true,
girdlines: { drawTicks: false, drawBorder: false, display: true}
ticks: {display: false, stepSize: 1, min: 1, max: 7 }
}
],
yAxes: [
{
display: false,
girdlines: { drawTicks: false, display: true}
ticks: {display: false, stepSize: 1, min: 0, max: 10 }
}
],
}
};
bubbleChartData: ChartDataSets[] = [
{
data: [
{ x: 1, y: 2, r: 8, },
{ x: 2, y: 7, r: 8 },
{ x: 3, y: 5, r: 8 },
{ x: 4, y: 3, r: 8 },
{ x: 5, y: 8, r: 8 },
{ x: 6, y: 1, r: 8 },
{ x: 7, y: 5, r: 8 },
],
label: '20',
backgroundColor: 'white',
borderColor: 'blue',
borderWidth: 2,
hoverBackgroundColor: 'purple',
hoverBorderColor: 'red',
},
];
Related
I am attempting to create the following chart:
However I can't seem to get the plotbands to work in this way; right now, they fill the entire axis:
I am not sure if I should use annotations instead, but so far I haven't gotten it to work. What can I try next?
Highcharts.chart('container',{
credits: {
enabled: false
},
title: {
text: "hello world",
style: {
visibility: 'hidden'
}
},
chart: {
type: 'line',
width: 400,
},
legend: {
enabled: false
},
exporting: {
enabled: true,
allowHTML:true,
chartOptions: {
chart: {
marginLeft: 175,
marginRight: 175
},
plotOptions: {
line: {
dataLabels: {
style: {
fontSize: 14
},
verticalAlign: "top",
useHTML: true
}
}
}
}
},
yAxis: {
startOnTick: false,
endOnTick: false,
gridLineWidth: 2,
tickWidth: 2,
tickLength: 20,
plotBands: [{
color: 'rgba(231, 23, 60, 0.5)', // Color value
from: 5, // Start of the plot band
to: 6.2 // End of the plot band
},
{
color: 'rgba(53, 101, 237, 0.5)', // Color value
from: 1, // Start of the plot band
to: 3 // End of the plot band
}
],
title: {
align: 'high',
offset: -40,
text: 'mmol/L',
style: {
fontWeight: "bold",
fontSize: 15
},
rotation: 0,
y: -20
},
min: 0,
max: 7,
labels: {
x: -10,
y: -3,
formatter: function () {
if (this.value != 0) {
if (this.value < 8) {
return this.value;
}
}
},
style: {
fontWeight: "400",
lineHight: "20",
padding: "0",
fontSize: "13"
}
}
},
annotations: [{
shapes: [{
point: '0',
type: 'circle',
r: 10
}, {
point: '3',
type: 'rect',
width: 20,
height: 20,
x: -10,
y: -25
}, {
fill: 'none',
stroke: 'red',
strokeWidth: 3,
type: 'path',
points: ['0', '1', {
x: 6,
y: 195,
xAxis: 0,
yAxis: 0
}],
markerEnd: 'arrow'
}],
labels: [{
point: {
x: 6,
y: 195,
xAxis: 0,
yAxis: 0
}
}]
}],
xAxis: {
gridLineColor: 'transparent',
accessibility: {
rangeDescription: 'Range: 2010 to 2020'
},
categories: [2018, 2019]
},
plotOptions: {
line: {
dataLabels: {
style: {
fontSize: 14
},
verticalAlign: "top",
useHTML: true,
format: '<div style="max-width: 10ch; text-align: center;">{y}<br/>mmol/L</div>'
}
}
},
series: [{
name: '',
color: "black",
data: [5.4, 3],
showInLegend: false,
dataLabels: {
enabled: true,
useHTML: true,
}
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
This kind of plotBand shape is not possible from the API level, but you can simulate it in several ways. Example configurations:
SVG Renderer:
chart: {
events: {
render() {
const chart = this;
if (chart.rects) {
chart.rects = chart.rects.destroy();
}
chart.rects = chart.renderer.g('rects').attr({
zIndex: 1
}).add();
let x = chart.xAxis[0].toPixels(1),
y = chart.yAxis[0].toPixels(4),
width = chart.xAxis[0].toPixels(2) - chart.xAxis[0].toPixels(1),
height = chart.yAxis[0].toPixels(2) - chart.yAxis[0].toPixels(4);
chart.rect = chart.renderer.rect(x, y, width, height)
.attr({
fill: 'grey'
}).add(chart.rects)
chart.rect = chart.renderer.rect(chart.xAxis[0].toPixels(3), y, width, height)
.attr({
fill: 'grey'
}).add(chart.rects)
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/wst607ub/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Annotations:
annotations: [{
draggable: false,
shapes: [{
points: [{
x: 1,
y: 2,
xAxis: 0, // xAxis reference used, use xAxis value
yAxis: 0 // yAxis reference used, use xAxis value
}, {
x: 2,
y: 2,
xAxis: 0,
yAxis: 0
}, {
x: 2,
y: 4,
xAxis: 0,
yAxis: 0
}, {
x: 1,
y: 4,
xAxis: 0,
yAxis: 0
}],
type: 'path'
}]
}]
Demo:
https://jsfiddle.net/BlackLabel/uvxzp6o7/
API Reference:
https://api.highcharts.com/highcharts/annotations
Polygon series:
series: [{
name: 'Polygons',
type: 'polygon',
color: 'grey',
showInLegend: false,
enableMouseTracking: false,
states: {
inactive: {
opacity: 1,
},
},
data: [
[1, 2],
[2, 2],
[2, 4],
[1, 4],
null, // allows multiple polygons
[3, 2],
[4, 2],
[4, 4],
[3, 4],
]
}]
Demo:
https://jsfiddle.net/BlackLabel/4n7ep3k2/
API Reference:
https://api.highcharts.com/highcharts/series.polygon
Take note that annotations and polygon series require the module to be included.
I have 3 charts on my canvas 1 stacked bar chart and 2 line charts.
Line charts have same Y values but located at different heights.
I have 3.6 version Chart js
dataset
is data for my stacked bars
Line and linePrediction are my graphs and have same values
const line = {
label: 'Signed',
data: [
{x: 1, y: 12226000},
{x: 2, y: 12716000},
{x: 3, y: 14176000},
...
],
backgroundColor: 'rgba(55, 128, 189, 1)',
borderColor: 'rgba(55, 128, 189, 1)',
tension: 0.4,
type: 'line',
order: 1,
}
const data = {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
datasets: [ ...dataset, line, linePrediction]
};
const config = {
type: 'bar',
data,
options: {
responsive: true,
plugins: {
tooltip: {
enabled: true,
callbacks: {
title: function(tooltipItems, data) {
return tooltipItems[0].formattedValue || '';
},
label: function(context) {
return ' ' + context.dataset.label || '';
}
}
},
legend: {
display: true,
position: 'bottom',
labels: {
padding: 10
}
}
},
scales: {
x: {
stacked: true
},
y: {
beginAtZero: true,
stacked: true
},
},
}
};
const chart = new Chart(document.getElementById('chart'), config);
I want to create a dumbbell chart using highcharts.
I used x-range chart for this
here is the link: https://jsfiddle.net/thushara07/nLkxa0wr/15/
series: [{
// name: 'Project 3',
// pointPadding: 0,
// groupPadding: 0,
//borderColor: 'gray',
pointWidth: 5,
data: [{
x: 32,
x2: 33,
y: 0,
// partialFill: 0.25
}, {
x: 44,
x2:45,
y: 1
}, {
x:30,
x2: 32,
y: 2
}],
dataLabels: {
align: 'left',
enabled: true
}
}]
expected output: I want to show markers for each line created as shown
(https://images.app.goo.gl/LAKQBdsaKBH2hjS59
)
It can be done by adding additional scatter series that is linked to x-range:
Code:
Highcharts.chart('container', {
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
series: [{
type: 'xrange',
pointWidth: 5,
id: 'main',
data: [{
x: 32,
x2: 33,
y: 0
}, {
x: 44,
x2: 45,
y: 1
}, {
x: 30,
x2: 32,
y: 2
}],
dataLabels: {
align: 'center',
enabled: true
}
}, {
type: 'scatter',
linkedTo: 'main',
marker: {
radius: 5
},
data: [{
x: 32,
y: 0,
color: 'red'
}, {
x: 33,
y: 0,
color: 'grey'
}, {
x: 44,
y: 1,
color: 'red'
}, {
x: 45,
y: 1,
color: 'grey'
}, {
x: 30,
y: 2,
color: 'red'
}, {
x: 32,
y: 2,
color: 'grey'
}]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/4qj89cog/
API reference:
https://api.highcharts.com/highcharts/series.scatter
https://api.highcharts.com/highcharts/series.scatter.linkedTo
I'm trying to display a line chart on a webpage using Chart.js that shows the number of downloads in the apple store and google play store for a specific client for the past 5 days. The data appears properly, but does not properly label the X axis with this:
var downloadsChartData = {
labels: ["4 Days", "3 Days", "2 Days", "Yesterday", "Today"],
datasets: [{
label: "Google Play",
fill: false,
lineTension: 0,
backgroundColor: "rgba(0, 230, 115, 1)",
borderColor: "rgba(0, 230, 115, 1)",
borderCapStyle: 'butt',
borderJoinStyle: 'miter',
borderWidth: 2,
pointBorderColor: "rgba(150, 75, 75, 1)",
pointBorderWidth: 3,
pointRadius: 6,
pointHoverRadius: 9,
pointStyle: 'triangle',
data: [{
x: 1,
y: 2
}, {
x: 2,
y: 0
}, {
x: 3,
y: 3
}, {
x: 4,
y: 1
}, {
x: 5,
y: 1
}]
}, {
label: "iOS",
fill: false,
lineTension: 0,
backgroundColor: "rgba(26, 117, 255, 1)",
borderColor: "rgba(26, 117, 225, 1)",
borderCapStyle: 'butt',
borderJoinStyle: 'miter',
borderWidth: 2,
pointBorderColor: "rgba(150, 75, 75, 1)",
pointBorderWidth: 3,
pointRadius: 6,
pointHoverRadius: 9,
data: [{
x: 1,
y: 4
}, {
x: 2,
y: 2
}, {
x: 3,
y: 0
}, {
x: 4,
y: 1
}, {
x: 5,
y: 4
}]
}]
};
var downloadsChartOptions = {
title: {
display: true,
text: 'Downloads on Google Play and App Store',
fontSize: 30
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
abelString: 'Date',
fontSize: 20
},
type: 'linear',
position: 'bottom',
gridLines: {
display: false
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Downloads',
fontSize: 20
}
}]
}
};
var downloadsChart = document.getElementById('downloadsChart').getContext('2d');
new Chart(downloadsChart, {
type: 'line',
data: downloadsChartData,
options: downloadsChartOptions
});
I tried to switch the data field to an array of values so that Chart.js would recognize the labels I defined in downloadsChartData to:
...
pointStyle: 'triangle',
data: [2, 0, 3, 1, 1]
}]
...
pointHoverRadius: 9,
data: [4, 2, 0, 1, 4]
}]
However, when I make this change, the chart not only doesn't correctly label the X axes, but also stops displaying the data on the line chart entirely.
Can someone please spot what I'm doing incorrectly? The documentation isn't too helpful in this matter.
The documentation is not very clear on this point, but for graphing non-numerical data (such as your case where the X axis represents a Date) you cannot set the X axis to have a linear scale. In other words, if you set your axis with a linear scale, it will graph the numerical representation of the data (and therefore, not the label).
I removed type: 'linear' from your downloadsChartOptions and it solved the issue.:
var downloadsChartOptions = {
title: {
display: true,
text: 'Downloads on Google Play and App Store',
fontSize: 30
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Date',
fontSize: 20
},
//type: 'linear',
position: 'bottom',
gridLines: {
display: false
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Downloads',
fontSize: 20
}
}]
}
};
I use annotation.js in order to add customer input text data. My source code is given below... But I cannot create save text data when the customer presses the Done button. How do I change this source code to solve my problem?
$(function () {
var options = {
chart: {
width: 980,
borderWidth: 5,
borderColor: '#e8eaeb',
borderRadius: 0,
renderTo: 'container',
backgroundColor: '#f7f7f7',
marginTop: 50
},
xAxis: {
min: 0,
max: 10
},
title: {
style: {
'fontSize': '1em'
},
useHTML: true,
x: -27,
y: 8,
text: '<span class="chart-title"> Drag and drop on a chart to add annotation <span class="chart-href"> Black Label </span> <span class="chart-subtitle">plugin by </span></span>'
},
annotations: [{
title: {
text: '<span style="">drag me anywhere <br> dblclick to remove</span>',
style: {
color: 'red'
}
},
anchorX: "left",
anchorY: "top",
allowDragX: true,
allowDragY: true,
x: 515,
y: 155
}, {
title: 'drag me <br> horizontaly',
anchorX: "left",
anchorY: "top",
allowDragY: false,
allowDragX: true,
xValue: 4,
yValue: 10,
shape: {
type: 'path',
params: {
d: ['M', 0, 0, 'L', 110, 0],
stroke: '#c55'
}
}
}, {
title: 'on point <br> drag&drop <br> disabled',
linkedTo: 'high',
allowDragY: false,
allowDragX: false,
anchorX: "center",
anchorY: "center",
shape: {
type: 'circle',
params: {
r: 40,
stroke: '#c55'
}
}
}, {
x: 100,
y: 200,
title: 'drag me <br> verticaly',
anchorX: "left",
anchorY: "top",
allowDragY: true,
allowDragX: false,
shape: {
type: 'rect',
params: {
x: 0,
y: 0,
width: 55,
height: 40
}
}
}],
series: [{
data: [13, 4, 5, {
y: 1,
id: 'high'
},
2, 1, 3, 2, 11, 6, 5, 13, 6, 9, 11, 2, 3, 7, 9, 11]
}]
};
var chart = new Highcharts.StockChart(options);
});