I am trying to create a chart that will look like this:
https://i.stack.imgur.com/9KpYO.png
but I am getting this:
https://i.stack.imgur.com/oA7Vm.png
This is my configuration:
{
chartOptions: {
chart: {
type: 'area',
height: 200,
toolbar: { show: false },
zoom: { enabled: false },
},
colors: ["#01c40e"],
grid: { show: false},
dataLabels: { enabled: false },
legend: { show: false },
stroke: {
curve: 'straight',
width: 2,
},
xaxis: {
type: 'numeric',
labels: {show: false},
axisBorder: {show:false},
axisTicks: {show:false},
},
yaxis: {
type: 'numeric',
labels: {show: false},
axisBorder: {show:false},
axisTicks: {show:false},
},
fill: {
type: "gradient",
gradient: {
shade: "light",
type: "vertical",
shadeIntensity: 0,
opacityFrom: 0.2,
opacityTo: 0.7,
stops: [0, 50, 80, 100]
}
},
tooltip: { enabled: false}
},
series: [{
name: 'Series A',
type: "area", // this is not in documentation but without it i get line, not area
data: [4852, 4840, 4845, 4859, 4862, 4852]
}]
}
Mostly it is about the fill configuration which fills the area too much and instead of fill being highest at the top, it is at the bottom, which makes the gradient inverse of what I need.
try swapping the values for opacityFrom and opacityTo,
and removing the option for stops
fill: {
type: "gradient",
gradient: {
shade: "light",
type: "vertical",
shadeIntensity: 0,
opacityFrom: 0.7,
opacityTo: 0.2
}
},
see following working snippet...
$(document).ready(function() {
var chart = new ApexCharts(
document.getElementById('chart'),
{
chart: {
type: 'area',
height: 200,
toolbar: { show: false },
zoom: { enabled: false },
},
colors: ["#01c40e"],
grid: { show: false},
dataLabels: { enabled: false },
legend: { show: false },
stroke: {
curve: 'straight',
width: 2,
},
xaxis: {
type: 'numeric',
labels: {show: false},
axisBorder: {show:false},
axisTicks: {show:false},
},
yaxis: {
type: 'numeric',
labels: {show: false},
axisBorder: {show:false},
axisTicks: {show:false},
},
fill: {
type: "gradient",
gradient: {
shade: "light",
type: "vertical",
shadeIntensity: 0,
opacityFrom: 0.7,
opacityTo: 0.2
}
},
tooltip: { enabled: false},
series: [{
name: 'Series A',
type: "area", // this is not in documentation but without it i get line, not area
data: [4852, 4840, 4845, 4859, 4862, 4852]
}]
}
);
chart.render();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
Related
Hello! I have problem with color in highchart library. I define class name of color inside data series. Class apply only to pie path but does not apply for legend. Ноw define color as class inside data series for all elements inside chart
Highcharts.chart('lvl-chart', {
chart: {
type: 'pie'
},
title: {
text: 'Fruit Consumption'
},
legend: {
align: 'left',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 100
},
plotOptions: {
pie: {
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
data: [{
name: 'Chrome',
className:'emergency',
y: 61.41,
}, {
name: 'Internet Explorer',
className:'emergency',
y: 11.84
}, {
name: 'Firefox',
className:'emergency',
y: 10.85
}, {
name: 'Edge',
className:'emergency',
y: 4.67
}, {
name: 'Safari',
className:'emergency',
y: 4.18
}, {
name: 'Other',
className:'emergency',
y: 7.05,
}]
}]
});
.emergency{
background-color: #FF6347;
fill: #FF6347;
}
<div id="lvl-chart" style="width:100%; height:400px;"></div>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
Do you need to use the className? You should be able to achieve it by defining the plotOptions.pie.colors array.
plotOptions: {
pie: {
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
colors: ['#FF6347']
}
},
Demo: https://jsfiddle.net/BlackLabel/463czorb/
API: https://api.highcharts.com/highcharts/plotOptions.pie.colors
EDIT
To update the legend items colors to the same as the point has assigned via CSS you need to enable the styledMode in the chart.
Demo: https://jsfiddle.net/BlackLabel/f7wpbax3/
API: https://www.highcharts.com/docs/chart-design-and-style/style-by-css
I'm trying to get chartjs to show a specific label next to each point, for example in this script it should display "TRALALA" in the label as well as mouse hover, but instead it shows the coordinates.
How to have the specific label instead ?
https://jsfiddle.net/z0eLygwx/
thanks
var valuedata = [{
x: 3,
y: 5
}];
var valuelabel = ['TRALALA'];
var chartData = {
labels: valuelabel,
datasets: [{
label: 'Distance',
borderColor: '#2196f3', // Add custom color border
backgroundColor: '#2196f3', // Add custom color background (Points and Fill)
data: valuedata,
pointRadius: 10,
pointHoverRadius: 12
}]
};
var myBarChart = new Chart(document.getElementById("myChart1"), {
type: 'scatter',
data: {
labels: valuelabel,
datasets: [{
label: 'Distance',
borderColor: '#2196f3', // Add custom color border
backgroundColor: '#2196f3', // Add custom color background (Points and Fill)
data: valuedata,
pointRadius: 10,
pointHoverRadius: 12
}]
},
options: {
legend: {
display: true
},
title: {
display: true,
text: 'Distance of JDPT kanji compared to the equivalent JLPT level'
},
scales: {
yAxes: [{
type: 'logarithmic',
display: true,
scaleLabel: {
display: true,
labelString: 'Count',
fontSize: 16
}
}],
xAxes: [{
type: 'linear',
position: 'bottom',
display: true,
scaleLabel: {
display: true,
labelString: 'Distance',
fontSize: 16
},
gridLines: {
display: true
}
}]
},
plugins: {
datalabels: {
color: '#d6621e',
align: 'right',
offset: 16,
font: {
weight: 'bold'
}
}
}
}
});
myBarChart.update();
Ok I got it with
formatter: function(value, context) {
context.chart.data.labels[context.dataIndex];
}
For example
var myBarChart = new Chart(document.getElementById("bar-chart"), {
type: 'line',
data: {
labels: ['a', 'b'],
datasets: [{
data: [10, 20]
}]
},
options: {
plugins: {
datalabels: {
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
}
}
}
}
});
I am trying to create a chart with chart.js and i am using this plugin for showing some labels. But when most value on top, it not showing. Check first value (5), it not showing. Is any way to show it?
I tried padding for <canvas> but not work.
var ver = document.getElementById("chart").getContext('2d');
var chart = new Chart(ver, {
type: 'bar',
data: {
labels: ['Val1', 'Val2', 'Val3', 'Val4'],
datasets: [{
label: "Value",
borderColor: "#fff",
backgroundColor: "rgba(248,66,113,.85)",
hoverBackgroundColor: "#f84271",
data: [5,3,1,2]
}]
},
options: {
legend: {
display: false,
},
tooltips: {
backgroundColor: 'rgba(47, 49, 66, 0.8)',
titleFontSize: 13,
titleFontColor: '#fff',
caretSize: 0,
cornerRadius: 4,
xPadding: 10,
displayColors: false,
yPadding: 10
},
animation: {
"duration": "1000"
},
scales: {
xAxes: [{
stacked: false,
gridLines: {
drawBorder: true,
display: true
},
ticks: {
display: true
}
}],
yAxes: [{
stacked: false,
gridLines: {
drawBorder: true,
display: true
},
ticks: {
display: true
}
}]
},
plugins: {
labels: {
render: 'value',
}
},
}
});
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="chart"></canvas>
Also fiddle here: https://jsfiddle.net/9o84ucny/
https://www.chartjs.org/docs/latest/configuration/layout.html
Use the layout property to options object:
layout: {
padding: {
top: 20
}
}
chart var should be like that:
var chart = new Chart(ver, {
type: 'bar',
data: {
labels: ['Val1', 'Val2', 'Val3', 'Val4'],
datasets: [{
label: "Value",
borderColor: "#fff",
backgroundColor: "rgba(248,66,113,.85)",
hoverBackgroundColor: "#f84271",
data: [5,10,1,2]
}]
},
options: {
layout: {
padding: {
top: 20
}
},
legend: {
display: false,
},
tooltips: {
backgroundColor: 'rgba(47, 49, 66, 0.8)',
titleFontSize: 13,
titleFontColor: '#fff',
caretSize: 0,
cornerRadius: 4,
xPadding: 10,
displayColors: false,
yPadding: 10
},
animation: {
"duration": "1000"
},
scales: {
xAxes: [{
stacked: false,
gridLines: {
drawBorder: true,
display: true
},
ticks: {
display: true
}
}],
yAxes: [{
stacked: false,
gridLines: {
drawBorder: true,
display: true
},
ticks: {
display: true
}
}]
},
plugins: {
labels: {
render: 'value',
}
},
}
});
It also show clear when you use title display true put this inside option
options: {
plugins: {
labels: {
render: 'value',
}
},
title: {
display: true,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function (value) { if (value % 1 === 0) { return value; } }
}
}]
}
}
I'm successfully graphing a bunch of data points using Chartjs 2 with React, with a category Y-axis, but would like to label them with their category label. They're currently showing "undefined" as a tooltip value:
Here's what I've got right now (not working):
labels: this.state.graphData.eventWeekArray,
datasets: [
{
label: title,
labels: data,
fill: false,
lineTension: 0.1,
borderColor: colorArray()[counter],
borderCapStyle: 'butt',
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 6,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 3,
pointRadius: 1,
pointHitRadius: 1,
showLine: true,
steppedLine: true,
spanGaps: true,
data: data,
year: dataYear,
measurement: 'state'
}
]
Using options and scaleLabel doesn't work, either:
const options = {
legend: {
display: true
},
scales: {
xAxes: [
{
scaleLabel: {
display: true,
labelString: 'Weeks'
},
ticks: {
autoSkip: true,
autoSkipPadding: 20
}
}
],
yAxes: [
{
type: 'category',
labels: this.state.eventLabelArray
},
{
type: 'linear',
labels: this.state.brixLabelArray
}
]
}
};
So I have a chart.js chart with two series. One is a bar chart and the other is a line graph.
S1 = 71,166,2,6,8
S2 = 6,2,4,8,5
When I plot them, they both appear on their own scales which makes the bar and line graphs kinda pointless.
I need a way to plot both charts on the same scale.
Is there a way to do this within chart.js? If not, how would you do it?
thanks.
var barChartData = {
labels: dataLabels,
datasets: [{
type: 'bar',
label: "Actual",
data: dataActual,
fill: false,
backgroundColor: '#71B37C',
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y-axis-2'
}, {
label: "Maximum",
type:'line',
data: dataMaximum,
fill: false,
borderColor: '#EC932F',
backgroundColor: '#EC932F',
pointBorderColor: '#EC932F',
pointBackgroundColor: '#EC932F',
pointHoverBackgroundColor: '#EC932F',
pointHoverBorderColor: '#EC932F',
yAxisID: 'y-axis-1'
} ]
};
$(function () {
if (theChart !== undefined) {
theChart.destroy();
}
var ctxActualVsMax = document.getElementById("myChart2").getContext("2d");
theChart = new Chart(ctxActualVsMax, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
tooltips: {
mode: 'label'
},
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false
},
labels: {
show: true,
}
}],
yAxes: [{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
gridLines:{
display: false
},
labels: {
show:true,
}
}, {
type: "linear",
display: false,
position: "right",
id: "y-axis-2",
gridLines:{
display: false
},
labels: {
show:true,
}
}]
}
}
});
});
In your code you have specified your two datasets to use different yAxisId's. Just set them both to the same, you can also remove the unused yAxes object from the options
fiddle