I use echarts plugin to build line chart at a some web pages. It works good but I can't find out inside documentation how to add padding between line chart and y-axis label and move y-axis label to the center between y-axis split lines?
Current line echarts plugin instance view:
Expected line echarts plugin instance view:
The screenshot above mean that I mentally shifted the graph away from the internal label so that they would not intersect and moved the labels along the y-axis of the game below exactly in the center between the split lines
What settings in the plugin do I need to change to achieve the same result as in the screenshot with the expected result?
You can achieve this in the different ways, but most of the them are costly to support and harden to implement. It one of safety and ease way but you will need to keep an eye that xAxis have a little bit more points than series data to show gap.
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '10%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
yAxis: {
type: 'value',
position: 'right',
axisLabel: {
inside: true,
margin: 50,
fontSize: 18
}
},
series: [{
type: 'line',
areaStyle: {
color: 'rgba(104, 216, 214, 0.4)'
},
lineStyle: {
width: 2,
color: 'rgba(104, 216, 214, 1)'
},
data: [120, 132, 101, 134, 90, 230, 210]
}, ]
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
var myChart = echarts.init(document.getElementById('main'));
var seriesData = Array.from({length: 100}, () => Math.floor(Math.random() * 5000));
var option = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '10%',
bottom: '15%',
},
xAxis: [{
id: 'xAxis1',
type: 'category',
boundaryGap: false,
data: Array.from({length: seriesData.length}, () => Math.floor(Math.random() * 100)),
axisLine: {
lineStyle: {
shadowOffsetX: 60,
},
},
}],
yAxis: [{
type: 'value',
axisLine: { onZero: false },
position: 'right',
show: true,
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0)',
},
},
splitLine: {
lineStyle: {
shadowOffsetX: 60,
shadowColor: '#ccc'
}
},
axisLabel: {
interval: 0,
inside: true,
margin: -45,
fontSize: 16,
padding: [-50, 0, 0, 0],
color: 'black',
showMinLabel: false,
showMaxLabel: false,
},
},{
type: 'value',
position: 'right',
show: true,
offset: 59,
}
],
dataZoom: [{
type: 'inside'
}, {
type: 'slider',
show: true,
bottom: 0
}],
series: [{
id: 'series1',
type: 'line',
yAxisIndex: [0,1],
lineStyle: {
width: 1,
},
label: {},
data: seriesData,
}],
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
Related
I used following code in Chart 2.2.1 and it worked well and we can see label Time.
Now we want to upgrade to 3.6.0 due to security reasons, but snippet stopped working. I attach 2 fiddles
Working 2.2.1: https://jsfiddle.net/maksim_beliaev/2ru3g5ot/8/
Not working 3.6.0: https://jsfiddle.net/maksim_beliaev/q2poncyd/5/
How can I set label for X and Y axis with new chartjs? In online docs for Axis and Labels looks like that syntax should be correct
function create_line_chart(ctx, x_axis, version_1, y_axis_1, version_2, y_axis_2) {
new Chart(ctx, {
type: 'line',
data: {
labels: x_axis,
type: 'line',
defaultFontFamily: 'Montserrat',
datasets: [{
label: version_1,
data: y_axis_1,
backgroundColor: 'transparent',
borderColor: 'rgba(220,53,69,0.75)',
borderWidth: 3,
pointStyle: 'circle',
pointRadius: 5,
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(220,53,69,0.75)',
}, {
label: version_2,
data: y_axis_2,
backgroundColor: 'transparent',
borderColor: 'rgba(40,167,69,0.75)',
borderWidth: 3,
pointStyle: 'circle',
pointRadius: 5,
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(40,167,69,0.75)',
}]
},
options: {
responsive: true,
tooltips: {
mode: 'index',
titleFontSize: 12,
titleFontColor: '#000',
bodyFontColor: '#000',
backgroundColor: '#fff',
titleFontFamily: 'Montserrat',
bodyFontFamily: 'Montserrat',
cornerRadius: 3,
intersect: false,
},
legend: {
display: false,
labels: {
usePointStyle: true,
fontFamily: 'Montserrat',
},
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false,
drawBorder: false
},
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
yAxes: [{
display: true,
gridLines: {
display: false,
drawBorder: false
},
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
},
title: {
display: false,
text: 'Normal Legend'
}
}
});
}
var ctx = document.getElementById( "canvas" );
ctx.height = 150;
create_line_chart(ctx, [2010, 2011, 2012, 2013, 2014, 2015, 2016],
194,
[0, 30, 10, 120, 50, 63, 10],
221,
[0, 50, 40, 80, 40, 79, 120],
);
Chart.js v3 has lots of API changes from Chart.js v2, you should pass your title configuration like this:
const titleConfig = {
scales: {
x: {
display: true,
title: {
display: true,
text: "Time",
padding: { top: 20, left: 0, right: 0, bottom: 0 },
},
},
y: {
display: true,
title: {
display: true,
text: "Value",
padding: { top: 30, left: 0, right: 0, bottom: 0 },
},
},
},
};
More information on how to use title configuration can be found on the documentation.
Here's a working fiddle: https://jsfiddle.net/vkghzxLc/15/
Basicly your whole options object is wrong, there are some major breaking changes in chart.js v3. For all changes please read the migration guide.
For the scale label to show you need to configure it in options.scales.x.title.text, also the tooltip and legend need to be configured in the plugins namespace, tooltip has been made singular
I'm new using ApexChart and I am having issue with a bar chart. I create the ApexChart, but the columns does not look aligned.
var options777 = {
chart: {
id: 'test',
height: 350,
type: 'bar'
},
plotOptions: {
bar: {
columnWidth: '50%'
}
},
series: [{
name: 'Eligibility',
data: [ 438, 360, 171, 322, 248, 190, 121, 206, 3 ]
}],
dataLabels: {
enabled: false
},
stroke: {
width: 2
},
grid: {
row: {
colors: ['#fff', '#f2f2f2']
}
},
xaxis: {
labels: {
rotate: -45
},
categories: [ "2020-04-27", "2020-04-22", "2020-04-20", "2020-04-24", "2020-04-23", "2020-04-28", "2020-04-25", "2020-04-21", "2020-04-19" ],
tickPlacement: 'on',
type: 'datetime'
},
yaxis: {
title: {
text: 'Eligibility',
},
},
fill: {
type: 'gradient',
gradient: {
shade: 'light',
type: "horizontal",
shadeIntensity: 0.25,
gradientToColors: undefined,
inverseColors: true,
opacityFrom: 0.85,
opacityTo: 0.85,
stops: [50, 0, 100]
},
}
};
var chart777 = new ApexCharts(
document.querySelector("#myChart"),
options777
);
chart777.render();
When the chart is rendered it looks like the image below. Why are the columns like that? Shouldn't it be one beside another?
I have a chart with legend items which are overlapping each other (this is the image for itemDistance option set to 20 - clearly the distance between items is less than 20px, it seems that 20px is item distance between legend symbols):
The chart is fixed and legend is displayed properly only after resizing the window (image for exactly same configuration object - the only window has been resized):
I can't figure out what I have done wrong or if I have just encountered a bug in Highcharts. I'm using Highcharts v. 7.2.0 with HighchartsReactOfficial library v. 2.2.2. My configuration object:
const options: Highcharts.Options = {
chart: {
type: 'spline',
spacingLeft: 40,
spacingRight: 40,
},
title: {
style: {
display: 'none',
},
},
subtitle: {
style: {
display: 'none',
},
},
credits: {
enabled: false,
},
legend: {
itemDistance: 20,
itemStyle: {
color: '#7990A1',
},
},
plotOptions: {
series: {
marker: {
symbol: 'circle',
lineWidth: 1,
},
shadow: true,
},
},
series: [{
name: 'test1',
type: 'spline',
color: '#576A7B',
data: [23, 3, 33, 54, 29, 38],
},
{
name: 'test2',
type: 'spline',
color: '#FE7B1A',
data: [45, 21, 76, 43, 67, 59],
},
{
name: 'test3',
type: 'spline',
color: '#00BAFF',
data: [7, 19, 5, 9, 12, 11],
},
{
name: 'test4',
type: 'spline',
color: '#000000',
data: [40, 3, 71, 20, 28, 31],
},
],
yAxis: {
title: {
style: {
display: 'none',
},
},
showFirstLabel: false,
},
xAxis: {
categories: ['2019-05-15', '2019-05-16', '2019-05-17', '2019-05-18', '2019-05-19', '2019-05-20'],
},
};
Used by rendering component:
<HighchartsReact highcharts={Highcharts} options={options} />
Help will be greatly appreciated.
I am very new to Highcharts. I am trying to use the solid gauge. The problem is that the percentage text is not present in the center. Is there anyway to put the percentage in the center of the chart?
Here is the code:
$(function () {
Highcharts.chart('container', {
chart: {
type: 'solidgauge'
},
title: {
text: ''
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function (labelWidth, labelHeight) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: {
center: ['50%', '27%'],
startAngle: 0,
endAngle: 360,
background: [{ // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
borderWidth: 0,
}],
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: '34px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: [{
name: 'Stand',
borderColor: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}]
}]
},
});
The x and y in the label option can set the position but I want it to be dynamic.
Secondly I want it to be always shown. Here is the result of the code above.
My problem is changing background bars in a highchart bar chart. I can change bars to a specific color like below but I want to make it gradient.
In this code I used red color (FF0000) in chart options. How to change it for gradient backgroud?
HTML :
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
JS :
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
colors: [
'#ff0000'
],
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Percentage',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [10, 31, 63, 3, 28]
}]
});
});
JSFiddle
JsFiddle
Please refer above fiddle to check the results
First, declare a gradient as per Highcharts
const color_grad1 = {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#fdfc47'],
[1, '#24fe41']
]
};
Then use gradient as follows:
data: [{y: 10, color: color_grad1}, 31, 63, 3, 28]