Bar Chart

Installation

Use the package manager NPM to install Bar Chart.

npm install @impetusuxp/vizualy-bar-chart

Sample Data (Chart's required data format)

const data = [{
    Client: "client 1",
    Count: 49199
}, {
    Client: "client 2",
    Count: 90928
}, {
    Client: "client 3",
    Count: 46913
}, {
    Client: "client 4",
    Count: 18270
}];

Usage

1.

import BarChart from '@impetusuxp/vizualy-bar-chart';

const barChart = new BarChart();

// Draw chart
barChart
      .container('containerID')
      .x('x axis key in data') // Referred as "Client" key in sample Data
      .y('y axis key in data') // Referred as "Count" key in sample Data
      .data(data object) // Referred to sample data
      .settings(chart configuration object)
      .draw();

// Update chart
barChart.data(updated data object).update();

<script type="text/javascript" src="./libs/d3.v6.min.js"></script>
<script type="text/javascript" src="./vizualy-assistant/src/js/utility.js"></script>
<script type="text/javascript" src="./vizualy-assistant/src/js/assistant.js"></script>
<script type="text/javascript" src="./vizualy-assistant/src/js/observer.js"></script>
<script type="text/javascript" src="./vizualy-bar-chart/vizualy-bar-chart.js"></script>
<script>
const barchart = new vizualy.BarChart();

// Draw chart
barChart
      .container('containerID')
      .x('x axis key in data') // Referred as "Client" key in sample Data
      .y('y axis key in data') // Referred as "Count" key in sample Data
      .data(data object) // Referred to sample data
      .settings(chart configuration object)
      .draw();

// Update chart
barChart.data(updated data object).update();
</script>

Make sure to use/import vizualy-assistant/src/css/common.css in your code-base as per recommended by frontend framework being used

Configurations/Settings

dimension: {
    width: 500,
    height: 500,
    margin: { top: 20, right: 20, bottom: 40, left: 40 }
}

xAxis: {
    isVisible: true,
    isGridsVisible: true,
    tickFormat: (d) => d
}

yAxis: {
    isVisible: true,
    isGridsVisible: true,
    tickFormat: (d) => d
}

xAxisLabel: {
    value: '',
    margin: 40,
    isVisible: true
}

yAxisLabel: {
    value: '',
    margin: 50,
    isVisible: true
}

barLabel: {
    isVisible: true,
    labelFormat: (d) => d
}

tooltip: {
    isVisible: true,
    content: (d, chartObject) => "Some html",
    placement: "top-right"
}

animation: {
    isApplied: true,
    duration: 750,
    type: 'cubic'
}

xWordWrap: {
    isVisible: false,
    linesToAddEllipses: 1
},

barSpace : {
    type: 'perc',
    value: 0.1 
},

brush: {
    isVisible: false,
    limit: 30,
    offset: 0,
    height: 80,
    margin: 60
},

legend: {
    isVisible: true,
    placement: 'right',
    margin: { top: 10, right: 10, bottom: 10, left: 10 },
    rectWidth: 10,
    rectHeight: 10,
    textKey: null,
    textFormat: (d) => d,
}

xScaleType: {
    type: "band"
},

yScaleType: {
    type: "Linear"
},

yAxisTicksCount : {
    value: 3,
    isApplied: false
},

rotateXAxisTick: false,

isResponsive: true

emptyDataMessage: 'No Data Available'

exceptionMessage: 'Something went wrong!! Please see logs.'

Chart's life cycle hooks:-

chartObject.on('beforeDraw', () => { // do something })
chartObject.on('completeDraw', () => { // do something })
chartObject.on('beforeUpdate', () => { // do something })
chartObject.on('completeUpdate, () => { // do something })
chartObject.on('beforeResize', () => { // do something })
chartObject.on('completeResize', () => { // do something })

Event subscription

barchart.getElement("bar").on('mouseMove', [(d, element, event) => { }], removePreviousHandlers: boolean);

We can attaché multiple handlers(Array of functions) on events(mouseMove) to exposed element(bar). We have below events to subscribe -> mouseMove, mouseEnter, mouseOut, mouseOver, click

Contriubutor

Impetus Technologies

License

MIT