Example shows Vuejs multi series range area chart with custom colors.
/* App.vue */ <script> export default { data() { return { options: { title: { text: "Monthly Average High/Low Temperature", fontFamily: "Arial" }, axisX: { labelTextAlign: "center", valueFormatString: "MMM", interval: 1, intervalType: "month" }, axisY: { title: "Temperature ( in °C)", suffix: " °C" }, toolTip: { shared: true }, legend: { verticalAlign: "top", cursor: "pointer", itemclick: function (e) { if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { e.dataSeries.visible = false; } else { e.dataSeries.visible = true; } e.chart.render(); } }, data: [{ type: "rangeArea", name: "Alaska", color: "#9FA8DA", showInLegend: "true", xValueFormatString: "MMM YYYY", toolTipContent: "<span style='\"font-weight: bold\"'>{x}</span><br/><span style='\"'color: {color};'\"'>{name}</span><br>Min: {y[0]} °C<br/> Max: {y[1]} °C", dataPoints: [ { x: new Date(2019, 0, 1), y: [ -48.5917, 10.9038] }, { x: new Date(2019, 1, 1), y: [ -43.3525, 12.3194] }, { x: new Date(2019, 2, 1), y: [ -32.2423, 18.4731] }, { x: new Date(2019, 3, 1), y: [ -29.4546, 19.2536] }, { x: new Date(2019, 4, 1), y: [ -19.3477, 26.5583] }, { x: new Date(2019, 5, 1), y: [ -14.7646, 32.3932] }, { x: new Date(2019, 6, 1), y: [ -8.13169, 33.3964] }, { x: new Date(2019, 7, 1), y: [ -17.673, 27.779] }, { x: new Date(2019, 8, 1), y: [ -24.2034, 22.2688] }, { x: new Date(2019, 9, 1), y: [ -30.7377, 14.2121] }, { x: new Date(2019, 10, 1), y: [ -39.7765, 12.857] }, { x: new Date(2019, 11, 1), y: [ -53.4878, 9.65908] } ] }, { type: "rangeArea", name: "New York", color: "#283593", showInLegend: "true", toolTipContent: "<span style='\"'color: {color};'\"'>{name}</span><br>Min: {y[0]} °C<br/> Max: {y[1]} °C", dataPoints: [ { x: new Date(2019, 0, 1), y: [ -23.3, 17.8] }, { x: new Date(2019, 1, 1), y: [ -18.3, 22.8] }, { x: new Date(2019, 2, 1), y: [ -13.3, 25.6] }, { x: new Date(2019, 3, 1), y: [ -5, 27.2] }, { x: new Date(2019, 4, 1), y: [ 3, 32.8] }, { x: new Date(2019, 5, 1), y: [ 6.1, 35] }, { x: new Date(2019, 6, 1), y: [ 13.9, 38.3] }, { x: new Date(2019, 7, 1), y: [ 11, 36.111] }, { x: new Date(2019, 8, 1), y: [ 3, 34.4] }, { x: new Date(2019, 9, 1), y: [ -0.6, 35.611] }, { x: new Date(2019, 10, 1), y: [-8.3, 25] }, { x: new Date(2019, 11, 1), y: [-10, 18.9] } ] }] }, styleOptions: { width: "100%", height: "360px" } } } } </script> <template> <CanvasJSChart :options="options" :style="styleOptions" /> </template>
/*main.js*/ import { createApp } from 'vue' import App from './App.vue' import CanvasJSChart from '@canvasjs/vue-charts'; const app = createApp(App); app.use(CanvasJSChart); // install the CanvasJS Vuejs Chart Plugin app.mount('#app');
Area fill color can be customized by setting color property. You can customize the color of line and marker using lineColor and markerColor property.