Global Configuration

Apart from the components and their respective configurations, there are a set of configurations you can provide which will be globally applicable for the environment where you have set your canvases for. You can provide configurations to each canvas individually which will be applied separately on one canvas.

Let's deep dive into each configuration one by one:

GridLines

You can choose to show or hide the GridLines:

main
run-button
run-button
reset-button
loadData('/static/cars.json')
  .then((res) => {
let node = document.getElementById('chart-container');

const env = muze();
const canvas = env.canvas();
const DataModel = muze.DataModel;

const schema = [
	{ name: 'Name', type: 'dimension' },
	{ name: 'Miles_per_Gallon', type: 'measure', defAggFn: 'avg' },
	{ name: 'Cylinders', type: 'dimension' },
	{ name: 'Displacement', type: 'measure', defAggFn: 'max' },
	{ name: 'Horsepower', type: 'measure', defAggFn: 'max' },
	{ name: 'Weight_in_lbs', type: 'measure', defAggFn: 'avg' },
	{ name: 'Acceleration', type: 'measure', defAggFn: 'avg' },
	{ name: 'Year', type: 'dimension', subtype: 'temporal', format: '%Y-%m-%d' },
	{ name: 'Origin', type: 'dimension' } /* by default dimension */
];
const dataModelInstance = new DataModel(res, schema);

canvas
  		.data(dataModelInstance)
		.width(600)
		.height(400)
		.rows(['Horsepower'])
  		.config({
          gridLines: {
            x: {
              show: false
            }
          }
        })
		.columns(['Origin'])
		.mount(node);

})

Gridlines are now hidden for the x-axis

GridBands

You can choose to show the grid bands:

main
run-button
run-button
reset-button
loadData('/static/cars.json')
  .then((res) => {
let node = document.getElementById('chart-container');

const env = muze();
const canvas = env.canvas();
const DataModel = muze.DataModel;

const schema = [
	{ name: 'Name', type: 'dimension' },
	{ name: 'Miles_per_Gallon', type: 'measure', defAggFn: 'avg' },
	{ name: 'Cylinders', type: 'dimension' },
	{ name: 'Displacement', type: 'measure', defAggFn: 'max' },
	{ name: 'Horsepower', type: 'measure', defAggFn: 'max' },
	{ name: 'Weight_in_lbs', type: 'measure', defAggFn: 'avg' },
	{ name: 'Acceleration', type: 'measure', defAggFn: 'avg' },
	{ name: 'Year', type: 'dimension', subtype: 'temporal', format: '%Y-%m-%d' },
	{ name: 'Origin', type: 'dimension' } /* by default dimension */
];
const dataModelInstance = new DataModel(res, schema);

canvas
  		.data(dataModelInstance)
		.width(600)
		.height(400)
		.rows(['Horsepower'])
  		.config({
          gridBands: {
            x: {
              show: true
            }
          }
        })
		.columns(['Origin'])
		.mount(node);

})

Border

You can add and/or remove borders from Muze by stating exactly the set of borders you want to show. In addition, you can set the color, width and style for those borders:

main
run-button
run-button
reset-button
loadData('/static/cars.json')
  .then((res) => {
let node = document.getElementById('chart-container');
const env = muze();
const canvas = env.canvas();
const DataModel = muze.DataModel;

const schema = [
	{ name: 'Name', type: 'dimension' },
	{ name: 'Miles_per_Gallon', type: 'measure', defAggFn: 'avg' },
	{ name: 'Cylinders', type: 'dimension' },
	{ name: 'Displacement', type: 'measure', defAggFn: 'max' },
	{ name: 'Horsepower', type: 'measure', defAggFn: 'max' },
	{ name: 'Weight_in_lbs', type: 'measure', defAggFn: 'avg' },
	{ name: 'Acceleration', type: 'measure', defAggFn: 'avg' },
	{ name: 'Year', type: 'dimension', subtype: 'temporal', format: '%Y-%m-%d' },
	{ name: 'Origin', type: 'dimension' } /* by default dimension */
];
const dataModelInstance = new DataModel(res, schema);

canvas
  		.data(dataModelInstance)
		.width(600)
		.height(400)
		.config({
			border: {
              width: 2,
              style: 'dashed',
              color: 'red'
          },
		})
		.rows(['Cylinders'])
		.columns(['Horsepower'])
		.mount(node) /* Attaching the canvas to DOM element */
})

There are three different types of borders, Rows, Columns and the Values. Row Matrices have borders in between each of the rows, while Column Matrices have borders between the columns and finally, each of the Cells in the Value Matrices can be separated using those borders. By default, Muze creates borders for the matrices based on the kind of visualization is made using the fields. Let's go through them one by

  • showRowBorders : You can specify the top and bottom borders for the rows which will separate each of the rows from one another as shown below:
main
run-button
run-button
reset-button
loadData('/static/cars.json')
  .then((res) => {
let node = document.getElementById('chart-container');
const env = muze();
const canvas = env.canvas();
const DataModel = muze.DataModel;

const schema = [
	{ name: 'Name', type: 'dimension' },
	{ name: 'Miles_per_Gallon', type: 'measure', defAggFn: 'avg' },
	{ name: 'Cylinders', type: 'dimension' },
	{ name: 'Displacement', type: 'measure', defAggFn: 'max' },
	{ name: 'Horsepower', type: 'measure', defAggFn: 'max' },
	{ name: 'Weight_in_lbs', type: 'measure', defAggFn: 'avg' },
	{ name: 'Acceleration', type: 'measure', defAggFn: 'avg' },
	{ name: 'Year', type: 'dimension', subtype: 'temporal', format: '%Y-%m-%d' },
	{ name: 'Origin', type: 'dimension' } /* by default dimension */
];
const dataModelInstance = new DataModel(res, schema);

canvas
  		.data(dataModelInstance)
		.width(600)
		.height(400)
		.config({
  			border: {
				showRowBorders: {
					top: false,
					bottom: false
				}
			}
		})
		.rows(['Horsepower'])
			.columns(['Origin','Cylinders'])
		.mount(node) /* Attaching the canvas to DOM element */
})
  • showColBorders : Similar to Row Borders are the Column Borders, which create borders between multiple sets of columns. We use to establish this. Let's switch off the borders :
main
run-button
run-button
reset-button
loadData('/static/cars.json')
  .then((res) => {
let node = document.getElementById('chart-container');
const env = muze();
const canvas = env.canvas();
const DataModel = muze.DataModel;

const schema = [
	{ name: 'Name', type: 'dimension' },
	{ name: 'Miles_per_Gallon', type: 'measure', defAggFn: 'avg' },
	{ name: 'Cylinders', type: 'dimension' },
	{ name: 'Displacement', type: 'measure', defAggFn: 'max' },
	{ name: 'Horsepower', type: 'measure', defAggFn: 'max' },
	{ name: 'Weight_in_lbs', type: 'measure', defAggFn: 'avg' },
	{ name: 'Acceleration', type: 'measure', defAggFn: 'avg' },
	{ name: 'Year', type: 'dimension', subtype: 'temporal', format: '%Y-%m-%d' },
	{ name: 'Origin', type: 'dimension' } /* by default dimension */
];
const dataModelInstance = new DataModel(res, schema);

canvas
  		.data(dataModelInstance)
		.width(600)
		.height(400)
		.config({
  			border: {
				showColBorders: {
					left: false,
					right: false
				}
			}
		})
		.rows(['Horsepower'])
		.columns(['Origin','Cylinders'])
		.mount(node) /* Attaching the canvas to DOM element */
})
  • showValueBorders : The value borders are applicable to the value cells(i.e., the cells that show the chart):
main
run-button
run-button
reset-button
loadData('/static/cars.json')
  .then((res) => {
let node = document.getElementById('chart-container');
const env = muze();
const canvas = env.canvas();
const DataModel = muze.DataModel;

const schema = [
	{ name: 'Name', type: 'dimension' },
	{ name: 'Miles_per_Gallon', type: 'measure', defAggFn: 'avg' },
	{ name: 'Cylinders', type: 'dimension' },
	{ name: 'Displacement', type: 'measure', defAggFn: 'max' },
	{ name: 'Horsepower', type: 'measure', defAggFn: 'max' },
	{ name: 'Weight_in_lbs', type: 'measure', defAggFn: 'avg' },
	{ name: 'Acceleration', type: 'measure', defAggFn: 'avg' },
	{ name: 'Year', type: 'dimension', subtype: 'temporal', format: '%Y-%m-%d' },
	{ name: 'Origin', type: 'dimension' } /* by default dimension */
];
const dataModelInstance = new DataModel(res, schema);

canvas
  		.data(dataModelInstance)
		.width(600)
		.height(400)
		.config({
          border: {
            showValueBorders: {
              top: false,
              bottom: false,
              left: false,
              right: false
            }
          }
        })
		.rows(['Cylinders','Horsepower'])
		.columns(['Origin','Cylinders'])
		.mount(node) /* Attaching the canvas to DOM element */
})

As you can see, the value borders are now removed. We will now remove all the borders:

main
run-button
run-button
reset-button
loadData('/static/cars.json')
  .then((res) => {
let node = document.getElementById('chart-container');
const env = muze();
const canvas = env.canvas();
const DataModel = muze.DataModel;

const schema = [
	{ name: 'Name', type: 'dimension' },
	{ name: 'Miles_per_Gallon', type: 'measure', defAggFn: 'avg' },
	{ name: 'Cylinders', type: 'dimension' },
	{ name: 'Displacement', type: 'measure', defAggFn: 'max' },
	{ name: 'Horsepower', type: 'measure', defAggFn: 'max' },
	{ name: 'Weight_in_lbs', type: 'measure', defAggFn: 'avg' },
	{ name: 'Acceleration', type: 'measure', defAggFn: 'avg' },
	{ name: 'Year', type: 'dimension', subtype: 'temporal', format: '%Y-%m-%d' },
	{ name: 'Origin', type: 'dimension' } /* by default dimension */
];
const dataModelInstance = new DataModel(res, schema);

canvas
  		.data(dataModelInstance)
		.width(600)
		.height(400)
		.config({
          border: {
            showValueBorders: {
              top: false,
              bottom: false,
              left: false,
              right: false
            },
            showRowBorders: {
              top: false,
              bottom: false,
            },
            showColBorders: {
              left: false,
              right: false
            }
          }
        })
		.rows(['Cylinders','Horsepower'])
		.columns(['Origin','Cylinders'])
		.mount(node) /* Attaching the canvas to DOM element */
})

Interaction

Muze provides a set of configurations for interaction, especially for auto connected charts where the interaction can be used for information for multiple charts at a time.

The configurations for interactions

Tooltip

There are two modes in which the tooltip operates:

  • Fragmented

  • Consolidated

    By changing the mode, you can configure how the tooltips appear on the chart. The fragmented tooltip breaks the tooltip into multiple tooltips for multiple points, while the consolidated tooltip displays a single tooltip for a set of points, consolidating the data present in all of them.

    For instance:

    Let's draw a stacked bar chart showing the distribution of the Horsepower by Origin and Cylinders:

    To do so, we'll color the chart using Cylinders

main
run-button
run-button
reset-button
loadData('/static/cars.json')
  .then((res) => {
let node = document.getElementById('chart-container');
const env = muze();
const canvas = env.canvas();
const DataModel = muze.DataModel;

const schema = [
	{ name: 'Name', type: 'dimension' },
	{ name: 'Miles_per_Gallon', type: 'measure', defAggFn: 'avg' },
	{ name: 'Cylinders', type: 'dimension' },
	{ name: 'Displacement', type: 'measure', defAggFn: 'max' },
	{ name: 'Horsepower', type: 'measure', defAggFn: 'max' },
	{ name: 'Weight_in_lbs', type: 'measure', defAggFn: 'avg' },
	{ name: 'Acceleration', type: 'measure', defAggFn: 'avg' },
	{ name: 'Year', type: 'dimension', subtype: 'temporal', format: '%Y-%m-%d' },
	{ name: 'Origin', type: 'dimension' } /* by default dimension */
];
const dataModelInstance = new DataModel(res, schema);

canvas
  		.data(dataModelInstance)
		.width(600)
		.height(400)
  		.color('Cylinders')
		.rows(['Horsepower'])
		.columns(['Origin'])
		.mount(node) /* Attaching the canvas to DOM element */
})

As we can see from the figure, the hovered stacked bar shows a tooltip for all the three Cylinders in the We can change the mode to fragmented to get multiple tooltips for each of the stacks:

main
run-button
run-button
reset-button
loadData('/static/cars.json')
  .then((res) => {
let node = document.getElementById('chart-container');
const env = muze();
const canvas = env.canvas();
const DataModel = muze.DataModel;

const schema = [
	{ name: 'Name', type: 'dimension' },
	{ name: 'Miles_per_Gallon', type: 'measure', defAggFn: 'avg' },
	{ name: 'Cylinders', type: 'dimension' },
	{ name: 'Displacement', type: 'measure', defAggFn: 'max' },
	{ name: 'Horsepower', type: 'measure', defAggFn: 'max' },
	{ name: 'Weight_in_lbs', type: 'measure', defAggFn: 'avg' },
	{ name: 'Acceleration', type: 'measure', defAggFn: 'avg' },
	{ name: 'Year', type: 'dimension', subtype: 'temporal', format: '%Y-%m-%d' },
	{ name: 'Origin', type: 'dimension' } /* by default dimension */
];
const dataModelInstance = new DataModel(res, schema);

canvas
  		.data(dataModelInstance)
		.width(600)
		.height(400)
  		.config({
          interaction: {
            tooltip: {
              mode: 'fragmented'
            }
          }
        })
  		.color('Cylinders')
		.rows(['Horsepower'])
		.columns(['Origin'])
		.mount(node) /* Attaching the canvas to DOM element */
})

In addition to changing modes, we can format the tooltip based on how we wish it to be: For instance, you may choose to add or remove information shown in the tooltip or show some different information completely, you could do it for every chart.

Note: In order to use the tooltip formatter, you need to understand how the DataModel works so that you can effectively use the provided data set and modify it using the DataModel APIs. Let's take a simple example:

main
run-button
run-button
reset-button
loadData('/static/cars.json')
  .then((res) => {
let node = document.getElementById('chart-container');
const env = muze();
const html = muze.Operators.html;
const canvas = env.canvas();
const DataModel = muze.DataModel;

const schema = [
	{ name: 'Name', type: 'dimension' },
	{ name: 'Miles_per_Gallon', type: 'measure', defAggFn: 'avg' },
	{ name: 'Cylinders', type: 'dimension' },
	{ name: 'Displacement', type: 'measure', defAggFn: 'max' },
	{ name: 'Horsepower', type: 'measure', defAggFn: 'max' },
	{ name: 'Weight_in_lbs', type: 'measure', defAggFn: 'avg' },
	{ name: 'Acceleration', type: 'measure', defAggFn: 'avg' },
	{ name: 'Year', type: 'dimension', subtype: 'temporal', format: '%Y-%m-%d' },
	{ name: 'Origin', type: 'dimension' } /* by default dimension */
];
const dataModelInstance = new DataModel(res, schema);

canvas
  		.data(dataModelInstance)
		.width(600)
		.height(400)
  		.config({
          interaction: {
            tooltip: {
              formatter: (dataModel) => {
                const tooltipData = dataModel.getData().data;
                const fieldConfig = dataModel.getFieldsConfig();
                let tooltipContent = '';
                tooltipData.forEach((dataArray) => {
                  const originVal = dataArray[fieldConfig.Origin.index];
                  const hpVal = dataArray[fieldConfig.Horsepower.index];
                  const cylVal = dataArray[fieldConfig.Cylinders.index];
                  tooltipContent += `<p><b>${originVal}</b> produces cars with <b>${cylVal} Cylinders</b> with an average power of <b>${hpVal} HP</b>`;
                  tooltipContent += '<br>';
                });
                return html`${tooltipContent}`;
              }
            }
          }
        })
  		.color('Cylinders')
		.rows(['Horsepower'])
		.columns(['Origin'])
		.mount(node) /* Attaching the canvas to DOM element */
})

As you can see, we have now formatted the tooltip, but in order to do that we had to write a bunch of code. Let's break it down:

The tooltip formatter provides the DataModel attached to that tooltip. We can extract the data and configuration of the fields attached to it:

    const tooltipData = dataModel.getData().data;
    const fieldConfig = dataModel.getFieldsConfig();

Once we have the data attached to the tooltip, we can now arrange them as per we want. Considering that we get multiple rows attached to the tooltip(which will definitely be the case when the tooltip is consolidated), we'll loop over the entire dataset to format the values we need:

    tooltipData.forEach((dataArray) => {
        const originVal = dataArray[fieldConfig.Origin.index];
        const hpVal = dataArray[fieldConfig.Horsepower.index];
        const cylVal = dataArray[fieldConfig.Cylinders.index];
        tooltipContent += `<p><b>${originVal}</b> produces cars with <b>${cylVal} Cylinders</b> with an average power of <b>${hpVal} HP</b>`;
        tooltipContent += '<br>';
    });

Using the field Configs, we can get the values of the data attached to every row and we can format them as per we want. This formatting can be done in the form a DOM string which you can parse using the dataArray operator:

    return html`${tooltipContent}`; /* Normal string to DOM string */

Axes

You can provide the configurations for the axes as presented above. Each of the set of axes receives a configuration:

canvas .config({ axes: { x: { /* X-axis configuration / }, y: { / Y-axis configuration */ } } })

Following are the configurations axis supports:

  • show

Optionally, you can choose to hide the axes and prevent them from being drawn by just providing false for this configuration:

  • showAxisName

You can choose to show or hide the title of the axis, i.e., its name. By default the name of the axis is the name of the field provided for the axis:

  • axisNamePadding

You can increase or decrease the padding between the axis ticks and the name of the axis:

  • axisNamePadding

You can increase or decrease the padding between the axis ticks and the name of the axis:

  • padding

This is the padding between the ticks of the axis, if it is not a linear axis. Each of the ticks accept a padding value between 0 and 1, where 0 represents no padding and and 1 is the maximum padding that can be applied, as displayed below:

  • showInnerTicks

This allows to display ticks for the axis. By default, the linear axes always display the ticks and the band axes and time axes hide these ticks as we can see in the above examples. We can choose to show or hide them

  • numberOfTicks

You can provide the number of ticks for an axis in Muze. The given number is a hint, not an upper bound on the number of returned ticks.

  • tickFormat

You can quickly change the tick format for the particular axis, by providing your set of formatting for the ticks in the axis. Each label will be available for formatting and thus you can provide as many custom labels as you want:

main
run-button
run-button
reset-button
loadData('/static/cars.json')
  .then((res) => {
let node = document.getElementById('chart-container');
const env = muze();
const canvas = env.canvas();
const DataModel = muze.DataModel;

const schema = [
	{ name: 'Name', type: 'dimension' },
	{ name: 'Miles_per_Gallon', type: 'measure', defAggFn: 'avg' },
	{ name: 'Cylinders', type: 'dimension' },
	{ name: 'Displacement', type: 'measure', defAggFn: 'max' },
	{ name: 'Horsepower', type: 'measure', defAggFn: 'max' },
	{ name: 'Weight_in_lbs', type: 'measure', defAggFn: 'avg' },
	{ name: 'Acceleration', type: 'measure', defAggFn: 'avg' },
	{ name: 'Year', type: 'dimension', subtype: 'temporal', format: '%Y-%m-%d' },
	{ name: 'Origin', type: 'dimension' } /* by default dimension */
];
const dataModelInstance = new DataModel(res, schema);

canvas
  		.data(dataModelInstance)
		.width(600)
		.height(400)
  		.config({
          axes:{
            x:{
              show: false,
              padding: 0
            },
            y: {
              showAxisName: false,
              numberOfTicks:5
            }
          }
        })
  		.color('Cylinders')
		.rows(['Horsepower'])
		.columns(['Origin'])
		.mount(node) /* Attaching the canvas to DOM element */
})

Legends

Legends in canvas accept configurations separately for each of the type of legends as well as a common configuration for each. Let's understand the common configurations first:

Common Legend Configs :

position

You can position the canvases either to the left, right, top or bottom of the canvases:

main
run-button
run-button
reset-button
loadData('/static/cars.json')
  .then((res) => {
let node = document.getElementById('chart-container');
const env = muze();
const canvas = env.canvas();
const DataModel = muze.DataModel;

const schema = [
	{ name: 'Name', type: 'dimension' },
	{ name: 'Miles_per_Gallon', type: 'measure', defAggFn: 'avg' },
	{ name: 'Cylinders', type: 'dimension' },
	{ name: 'Displacement', type: 'measure', defAggFn: 'max' },
	{ name: 'Horsepower', type: 'measure', defAggFn: 'max' },
	{ name: 'Weight_in_lbs', type: 'measure', defAggFn: 'avg' },
	{ name: 'Acceleration', type: 'measure', defAggFn: 'avg' },
	{ name: 'Year', type: 'dimension', subtype: 'temporal', format: '%Y-%m-%d' },
	{ name: 'Origin', type: 'dimension' } /* by default dimension */
];
const dataModelInstance = new DataModel(res, schema);

canvas
  		.data(dataModelInstance)
		.width(600)
		.height(400)
        .config({
        	legend:{
       		   position: 'top'
    	    }
     	 })
  		.color('Cylinders')
		.rows(['Horsepower'])
		.columns(['Origin'])
		.mount(node) /* Attaching the canvas to DOM element */
})

Apart from the common configurations, each legend receives its own set of configurations based on the kind of legend it is. You can provide their configurations in this way :

canvas
             .legends({
                     color:{
                             /* Color Legend Configurations */
                     },
                     shape:{
                             /* Shape Legend Configurations */
                     },
                     size:{
                             /* Size Legend Configurations */
                     },  
             })

Configurations for each of the legends:

title

text

You can provide the text for the title of the legend. By default the legend automatically takes the text from the name of the field attached to it.

For instance, if we make a color legend from Origin, we get the header as 'Origin'. We can override this by putting our own text:

main
run-button
run-button
reset-button
loadData('/static/cars.json')
  .then((res) => {
let node = document.getElementById('chart-container');
const env = muze();
const canvas = env.canvas();
const DataModel = muze.DataModel;

const schema = [
	{ name: 'Name', type: 'dimension' },
	{ name: 'Miles_per_Gallon', type: 'measure', defAggFn: 'avg' },
	{ name: 'Cylinders', type: 'dimension' },
	{ name: 'Displacement', type: 'measure', defAggFn: 'max' },
	{ name: 'Horsepower', type: 'measure', defAggFn: 'max' },
	{ name: 'Weight_in_lbs', type: 'measure', defAggFn: 'avg' },
	{ name: 'Acceleration', type: 'measure', defAggFn: 'avg' },
	{ name: 'Year', type: 'dimension', subtype: 'temporal', format: '%Y-%m-%d' },
	{ name: 'Origin', type: 'dimension' } /* by default dimension */
];
const dataModelInstance = new DataModel(res, schema);

canvas
  		.data(dataModelInstance)
		.width(600)
		.height(400)
   	.config({
          legend:{
          color:{
            title: {
              text: 'Countries'
			  }
            }
          },
        })
  		.color('Origin')
		.rows(['Horsepower'])
		.columns(['Origin'])
		.mount(node) /* Attaching the canvas to DOM element */
})

orientation

You can change the orientation of the title as left, right and center. By default, the value is center. Let's change this orientation:

main
run-button
run-button
reset-button
loadData('/static/cars.json')
  .then((res) => {
let node = document.getElementById('chart-container');
const env = muze();
const canvas = env.canvas();
const DataModel = muze.DataModel;

const schema = [
	{ name: 'Name', type: 'dimension' },
	{ name: 'Miles_per_Gallon', type: 'measure', defAggFn: 'avg' },
	{ name: 'Cylinders', type: 'dimension' },
	{ name: 'Displacement', type: 'measure', defAggFn: 'max' },
	{ name: 'Horsepower', type: 'measure', defAggFn: 'max' },
	{ name: 'Weight_in_lbs', type: 'measure', defAggFn: 'avg' },
	{ name: 'Acceleration', type: 'measure', defAggFn: 'avg' },
	{ name: 'Year', type: 'dimension', subtype: 'temporal', format: '%Y-%m-%d' },
	{ name: 'Origin', type: 'dimension' } /* by default dimension */
];
const dataModelInstance = new DataModel(res, schema);

canvas
  		.data(dataModelInstance)
		.width(600)
		.height(400)
   	.config({
          legend:{
         color:{
           title: {
             orientation: 'left'
           }
         },
          },
        })
  		.color('Origin')
		.rows(['Horsepower'])
		.columns(['Origin'])
		.mount(node) /* Attaching the canvas to DOM element */
})

Item

icon

  • className

    You can apply your own class names to the icon to provide your own set of CSS.

  • type

    The type of icon decides what the shape will be. This configuration is only valid for Color Legends, since the shape legend's shape cannot be changed and the size legend displays areas of the shape and thus are best viewed as a circle. For instance, if we want to change the icon to a cross:

main
run-button
run-button
reset-button
loadData('/static/cars.json')
  .then((res) => {
let node = document.getElementById('chart-container');
const env = muze();
const canvas = env.canvas();
const DataModel = muze.DataModel;

const schema = [
	{ name: 'Name', type: 'dimension' },
	{ name: 'Miles_per_Gallon', type: 'measure', defAggFn: 'avg' },
	{ name: 'Cylinders', type: 'dimension' },
	{ name: 'Displacement', type: 'measure', defAggFn: 'max' },
	{ name: 'Horsepower', type: 'measure', defAggFn: 'max' },
	{ name: 'Weight_in_lbs', type: 'measure', defAggFn: 'avg' },
	{ name: 'Acceleration', type: 'measure', defAggFn: 'avg' },
	{ name: 'Year', type: 'dimension', subtype: 'temporal', format: '%Y-%m-%d' },
	{ name: 'Origin', type: 'dimension' } /* by default dimension */
];
const dataModelInstance = new DataModel(res, schema);

canvas
  		.data(dataModelInstance)
		.width(600)
		.height(400)
   		.config({
          legend:{
            color:{
              item: {
                icon: {
                type: 'cross'
              }
            }
          },
          },
        })
  		.color('Origin')
		.rows(['Horsepower'])
		.columns(['Origin'])
		.mount(node) /* Attaching the canvas to DOM element */
})


  • height

    Specifying the height, you can change the height of the icon, which defaults to 20

  • width

    Specifying the width, you can change the height of the icon, which defaults to 20

Text

orientation

You can change the orientation of the text in a legend and make it appear to the top, left, bottom and right of the icon in the item of the legend.

  canvas
    .legends({
        color:{
            item: {
                text {
                    orientation: 'left'
                    }
                    }
            },
     })
main
run-button
run-button
reset-button
loadData('/static/cars.json')
  .then((res) => {
let node = document.getElementById('chart-container');
const env = muze();
const canvas = env.canvas();
const DataModel = muze.DataModel;

const schema = [
	{ name: 'Name', type: 'dimension' },
	{ name: 'Miles_per_Gallon', type: 'measure', defAggFn: 'avg' },
	{ name: 'Cylinders', type: 'dimension' },
	{ name: 'Displacement', type: 'measure', defAggFn: 'max' },
	{ name: 'Horsepower', type: 'measure', defAggFn: 'max' },
	{ name: 'Weight_in_lbs', type: 'measure', defAggFn: 'avg' },
	{ name: 'Acceleration', type: 'measure', defAggFn: 'avg' },
	{ name: 'Year', type: 'dimension', subtype: 'temporal', format: '%Y-%m-%d' },
	{ name: 'Origin', type: 'dimension' } /* by default dimension */
];
const dataModelInstance = new DataModel(res, schema);

canvas
  		.data(dataModelInstance)
		.width(600)
		.height(400)
   		.config({
          legend:{
            color:{
              item: {
                text: {
                orientation: 'left'
              }
            }
          },
          },
        })
  		.color('Origin')
		.rows(['Horsepower'])
		.columns(['Origin'])
		.mount(node) /* Attaching the canvas to DOM element */
})