I am using canvasjs to create a doughnut chart - the chart itself works great but I want the labels to be removed from the chart itself and only be shown in the tooltip.
I have tried the below based on what I read on the canvasjs site but it does not hide the label:
<div id="chartContainer" style="width:150px; height:150px;"></div>
var chart = new CanvasJS.Chart("chartContainer",
{
animationEnabled: true,
theme: "theme2",
creditText:"",
axisY:{
valueFormatString: " ",
tickLength: 0
},
axisX:{
valueFormatString: " ",
tickLength: 0
},
data: [
{
type: "doughnut",
startAngle:270 ,
toolTipContent: "{label}: {y}",
dataPoints: [
{ y: 2, label: "L1"},
{ y: 3, label: "L2"},
{ y: 8, label: "L3"}
]
}
]
});
chart.render();
Is there a way to stop the label showing in the chart itself but still have a label value to use for the tooltip?
https://jsfiddle.net/befmrhz4/
Just found a way to do it using the name attribute in dataPoints:
var chart = new CanvasJS.Chart("chartContainer",
{
animationEnabled: true,
theme: "theme2",
data: [
{
type: "doughnut",
startAngle:270 ,
toolTipContent: "{name}: {y}",
dataPoints: [
{ y: 2, name: "L1"},
{ y: 3, name: "L2"},
{ y: 8, name: "L3"}
]
}
]
});
chart.render();
http://canvasjs.com/docs/charts/chart-options/data/datapoints/
Related
I have a nested pie chart (two pie chart series, one an outer "doughnut" around the other). The inner pie chart needs to mainly use inner-positioned labels, but sometimes there isn't enough room and they overlap:
How can I get this to not overlap? Is there a way to switch the overlapping labels or those that can't fit inside their slices to be outer-positioned instead? Or some other strategy to make these readable? Using 100% outer positioned labels works, but because of the outer pie chart there isn't much room and it's much harder to read because the outer pie chart also has its own set of outer-positioned labels.
Series def:
seriesOpt = [{
encode: {
value: "value",
itemName: "name"
},
type: "pie",
startAngle: 90,
//minShowLabelAngle: 0.05, // buggy, throws internal javascript error
avoidLabelOverlap: true,
datasetIndex: 0,
name: "inner",
radius: [0, insideRadius??"40%"],
label: {
show: true,
position: "inside"
distanceToLabelLine: 10,
alignTo: "none",
overflow: "truncate",
formatter: '{name|{b}}\n{pct|{d}%}',
rich: {
pct: {
color: '#999'
}
},
labelLine: {
show: false
}
},{
encode: {
value: "value",
itemName: "name"
},
type: "pie",
startAngle: 90,
//minShowLabelAngle: 0.05, // buggy, throws internal javascript error
avoidLabelOverlap: true,
datasetIndex: 1,
name: "outer",
radius: [outsideInnerRadius??"60%",outsideOuterRadius??"75%"],
label: {
show: true,
position: "outside",
distanceToLabelLine: 10,
alignTo: "none",
overflow: "truncate",
formatter: '{name|{b}}\n{pct|{d}%}',
rich: {
pct: {
color: '#999'
}
},
labelLine: {
show: true,
length: 60,
length2: 15
}
}]
You should tweak series-pie.labelLayout.
Here is an example:
const data = [
{
name: 'Foo',
value: 10
},
{
name: 'Bar',
value: 20
},
{
name: 'Baz',
value: 15
},
{
name: 'Qux',
value: 500
}
];
let option = {
series: [
{
type: 'pie',
radius: ['120px', '90px'],
center: ['50%', '50%'],
data,
label: {
position: 'inner'
},
labelLayout: {
moveOverlap: 'shiftY' // <--- HERE
}
},
{
type: 'pie',
radius: '42px',
center: ['50%', '50%'],
data,
label: {
position: 'inner'
},
labelLine: {
showAbove: true
},
// ========== THERE ==========
labelLayout: {
x: 131,
moveOverlap: 'shiftY'
}
// ====================
}
]
};
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
#main {
width: 300px;
height: 300px;
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>
I created a chart with two y-axis and one x-axis and struggle to create tooltips with intersect = false, so it will start the tooltip when hovering over the line and not only the point of the chart
However, the whole settings for the tooltip, described on
https://www.chartjs.org/docs/latest/configuration/tooltip.html
Does not seem to have any effect for me. My code see below
I am using this code inside a NodeRed template node
\<canvas id="myChart" width=912 height =370\>\</canvas\>
\<script\>
var textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');
var gridcolor = '#E6E6E6';
var linecolors = \['#333F50','#B55A11', '#90C050'\]
var backgroundColor = \['#999FA7','#DAAC88', '#C7DFA7'\]
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: {{{payload.labels}}},
datasets: [
{
label: 'Folie Länge Ist',
backgroundColor: backgroundColor[0],
borderColor: linecolors[0],
data: {{{payload.eins}}},
yAxisID: 'left-y-axis',
},
{
label: 'Folie Länge Soll',
backgroundColor: backgroundColor[1],
borderColor: linecolors[1],
data: {{{payload.zwei}}},
yAxisID: 'left-y-axis',
},
{
label: 'Aufwickler Durchmesser',
backgroundColor: backgroundColor[2],
borderColor: linecolors[2],
data: {{{payload.drei}}},
yAxisID: 'right-y-axis',
}
]
},
// Configuration options
options: {
animation: false,
legend: {
display: true,
position: "top"
},
elements: {
point: {
pointStyle: 'circle',
radius: 0
},
line: {
tension: 0,
fill: false
}
},
plugins: {
tooltip: {
mode: 'index',
intersect: false
}
},
scales: {
yAxes: [
{
gridLines :{display:false},
id: 'left-y-axis',
type: 'linear',
position: 'left',
ticks: {
fontColor: linecolors[0],
callback: function(value, index, ticks) {
return new Intl.NumberFormat('de-DE').format(value);
}
}
},
{
gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:1},
id: 'right-y-axis',
type: 'linear',
position: 'right',
ticks: {
fontColor:linecolors[2],
callback: function(value, index, ticks) {
return new Intl.NumberFormat('de-DE').format(value);
}
}
}
],
xAxes: [
{
ticks: {
autoSkip: true,
autoSkipPadding: 10,
maxRotation: 0,
minRotation: 0
}
}
]
}
}
});
\</script\>
Tried setting intersect = false, also enable = false just to test if these settings have an effect
Am trying to create bar graph with multiple plots using chartjs and the graph is generated successfully but one of the legend is not showing correctly.
Am using Chartjs 2.9.3 version.
One of the bar legendary is showing as circle instead of rectangle box. Kindly let me know if any workaround to get the correct legendary.
Bar graph show circle in the legendary
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [
{
label: 'Label1',
data: [3,4],
type: 'scatter',
backgroundColor: 'red',
pointStyle:'circle',
pointRadius:5
},
{
label: 'Label2',
data: [1,2],
type: 'scatter',
backgroundColor: 'blue',
pointStyle:'triangle',
pointRadius:5
},
{
backgroundColor: 'grey',
label: 'Label3',
data: [1,2],
borderWidth: 1,
type: 'bar'
}
]
},
options: {
responsive:false,
legend: {
labels : {
usePointStyle: true
}
},
title: {
display: true
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: '$/MWh'
}
}]
}
}
});
If the usePointstyle flag is set in the legend it defaults to the circle. In V2 this is not configurable for bar charts so you have 2 options
You can switch to a html legend and style that. Or you can update to chart.js version 3 where you can configure it for bar charts:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'yellow'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
backgroundColor: 'pink',
pointStyle: 'rect'
}
]
},
options: {
plugins: {
legend: {
labels: {
usePointStyle: true
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>
I want to make a simple graph (just a line between two coordinates - (2,5) and (5,10)).
HtML
<canvas id="line" width="600" height="400"></canvas>
JavaScript
var lineData = {
type: "line",
data: {
datasets: [{
label: "Test",
data: [{
x: 2,
y: 5
}, {
x: 5,
y: 10
}],
}]
}
}
var line = document.getElementById('line').getContext('2d');
new Chart(line).Line(lineData);
Unfortunately, this doesn't show anything.
Please refer the code snippet below to render the chart correctly, or can visit the fiddle -> https://jsfiddle.net/pgv2jon3/1/
var lineData = {
type: "line",
data: {
datasets: [{
label: "Test",
data: [{
x: 2,
y: 5
}, {
x: 5,
y: 10
}],
}]
}
}
var ctx = document.getElementById('line').getContext('2d');
new Chart(ctx, lineData);
I'm using HighCharts to display charts on my site.
What I'd like to achieve is just a line chart with (zoomable) Date-Time X-Axis and numbers in Y-Axis.
But the result is messed up:
I load data by an ajax call, create an array and use chart.series[0].setData(chartData); to set the chart's data. Below is a sample for chartData:
[[1343071800000, 17], [1343158200000, 171], [1343244600000, 291], [1343075400000, 18],
[1343161800000, 74], [1343248200000, 293], [1343165400000, 183], [1343251800000, 296]]
Also, I use DotNetHighCharts since I'm using ASP.NET MVC 3, but the generated javascript to create the chart is as follows:
chart = new Highcharts.Chart({
chart: { renderTo:'chart_container' },
legend: { align: 'left', borderWidth: 0, floating: true, layout: 'horizontal', verticalAlign: 'top', y: 20 },
plotOptions: { series: { cursor: 'pointer', marker: { lineWidth: 1 }, point: { events: { click: function() { alert(Highcharts.dateFormat('%A, %b %e, %Y', this.x) +': '+ this.y +' visits'); } } } } },
subtitle: { text: 'Source: Google Analytics' },
title: { text: 'Daily visits at www.highcharts.com' },
tooltip: { crosshairs: true, shared: true },
xAxis: { gridLineWidth: 1, labels: { align: 'left', x: 3, y: -3 }, tickInterval: 604800000, tickWidth: 0, type: 'datetime' },
yAxis: [{ labels: { align: 'left', x: 3, y: 16, formatter: function() { return Highcharts.numberFormat(this.value, 0); } }, showFirstLabel: false, title: { text: '' } }, { gridLineWidth: 0, labels: { align: 'right', x: -3, y: 16, formatter: function() { return Highcharts.numberFormat(this.value, 0); } }, linkedTo: 0, opposite: true, showFirstLabel: false, title: { text: '' } }],
series: [{ name: 'All visits' }]
Your dataset is not in chronological order. So the charting system is joining all the points as best it can.
For time-based series it is always best to sort your time from earliest to latest.