score:0
your first image is as close as it can get with plain chart.js with a single scale, chart.js does not support scale breaks.
you can add a second y axis and map the datasets to different scales:
var options = {
type: 'line',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12000, 19000, 3000, 5000, 2000, 3000],
bordercolor: 'orange',
yaxisid: 'y'
},
{
label: '# of points',
data: [7, 11, 5, 8, 3, 7],
bordercolor: 'pink',
yaxisid: 'y2'
}
]
},
options: {
scales: {
y: {
position: 'left'
},
y2: {
position: 'right'
}
}
}
}
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.7.1/chart.js"></script>
</body>
edit:
notice you are still using v2 of the lib
var options = {
type: 'line',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12000, 19000, 3000, 5000, 2000, 3000],
bordercolor: 'orange',
yaxisid: 'y'
},
{
label: '# of points',
data: [7, 11, 5, 8, 3, 7],
bordercolor: 'pink',
yaxisid: 'y2'
}
]
},
options: {
scales: {
yaxes: [{
id: 'y',
position: 'left'
}, {
id: 'y2',
position: 'right'
}]
}
}
}
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/2.9.4/chart.js"></script>
</body>
score:0
creating different y-axes worked fine for me, albeit partially. modify the js code to create an axis for each compared element:
var datasetsf = [];
for (var i = 1; i < datafollowers[0].length; i++) {
datasetsf.push(
{
label: datafollowers[0][i], // column name
data: datafollowers.slice(1).map(function(row) {return row[i]}), // data in that column
fill: false, // `true` for area charts, `false` for regular line charts
yaxisid: 'y' + i
}
)
}
well, with that modification version 2 of charts does not work as indicated. and in version 3, among other things, the colors are deconfigured as seen in the image.
the problem is that i have many graphics and i would have to adapt the code of all the graphics to work with version 3 (which i will do but i am very new to this and it would take time to fix them all). is there any way to do the same with version 2? and how could i do so that all the axes and created would not be seen?
Source: stackoverflow.com
Related Query
- Charts.js Multi Line scales. See value curve
- ChartJS Line Charts - remove color underneath lines
- Chart Js Change Label orientation on x-Axis for Line Charts
- create a multi line chart using Chart.js
- Legends for line charts in Chart.js
- ChartJS Line Graph - Multiple Lines, Show one Value on Tooltip
- Background colour of line charts in chart.js
- Chart.js Mixed Bar and Line chart with different scales
- How to display value of only one datapoint in line chart
- Chart.js - Line charts with different colors for each border lines
- Obtain max value of y axis of line chart rendered with Chart.js
- Angular-chart.js - Make line chart does not curve
- Chart.js - displaying multiple line charts using multiple labels
- Why can I not see a data value when hovering over a point on the radar chart?
- Chart.js 2.0.0-beta2 disable points on line Charts
- chartjs - Drawing vertical line on integer x axis value
- Map event position to y axis value in chartjs line chart
- How to display only one label in a multi line char?
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- Drawing line chart in chart.js placing dots only when value changes
- chartjs Line chart: scale respect value on x-axis
- How do I make line charts overlay over bar charts in chartjs
- chartjs - multi axis line chart - cannot read property 'min' of undefined
- How to add multiple background color in line charts
- How to change line segment color based on label value in chart.js?
- chartjs plugin datalabels does not show value on charts
- chart.js: issue with concatening two line charts
- How to use segment property to color line / border color based on value in chart js?
- Load more historical data in Line charts on panning left
- Generate multiple line charts in Django with ChartJS
More Query from same tag
- chart js different callback labels
- How to show slice value inside of slice in pie chart using chart.js
- How to Integrate Chart.Funnel.js in Chart.js
- How to get onClick Event for a Label in ChartJS and React?
- How can I skip data/labels in a period of time in Chartjs?
- How can I make my backgroundColor in Chart.js match up with a reversed order y axis?
- How to set lower limit for the highest value being displayed on Y Axis?
- Is this graph possible using chart.js?
- Chart.JS, date issues when upgrading to v3
- How to get rid of old data and of old graph in Chart.js?
- Change the style of the border in ChartJS
- increase the label size of a line chart in chart.js
- Chartjs not rendering in navigation stack
- Chart.js - Styling Legend - ONE legend entry per line
- c# Chart.Js and JSON with NewtonSoft
- Single Point Curve Chart.js
- destroy method implementation in pie chart chartjs
- ChartJS rotate label value vertical
- Ng2-Charts Linechart only showing first 2 two values
- X axis should have a space in Line chart- Chart JS
- Export chart.js into fixed sized chart
- ChartJs x-axis label to be in dateTime format issue: DD-MMM-YYYY, but displayed as MMM-YYYY-DD
- How to create an angular 7 component?
- How to add an input box next to Chart.js y axis label?
- Get Array with json without _chartjs: {…}, push: ƒ, pop: ƒ, shift: ƒ, splice: ƒ, …]
- How to change HTML style in ChartOption with if condition?
- Is there a way to align title and legend on the same line?
- Chart.js scatter charts: Is there a way to indicate that datapoints of two data sets are on top of each other?
- Ng2-charts / chart.js - how to refresh/update chart - angular 4
- how to set color for each item in tooltip with ChartJS